diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 9 - Tiling Texture/pixi.js b/examples/example 9 - Tiling Texture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 9 - Tiling Texture/pixi.js +++ b/examples/example 9 - Tiling Texture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 2028846..c7005f9 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/bin/pixi.js b/bin/pixi.js index 63e46d9..fe824fa 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,11 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return r.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,r.Matrix}var i=this,r=r||{};r.Point=function(t,e){this.x=t||0,this.y=e||0},r.Point.prototype.clone=function(){return new r.Point(this.x,this.y)},r.Point.constructor=r.Point,r.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},r.Rectangle.prototype.clone=function(){return new r.Rectangle(this.x,this.y,this.width,this.height)},r.Rectangle.constructor=r.Rectangle,r.DisplayObject=function(){this.position=new r.Point,this.scale=new r.Point(1,1),this.pivot=new r.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=r.mat3.create(),this.localTransform=r.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},r.DisplayObject.constructor=r.DisplayObject,r.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},r.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,s=this.pivot.y;t[2]=this.position.x-t[0]*r-s*t[1],t[5]=this.position.y-t[4]*s-r*t[3];var n=t[0],o=t[1],a=t[2],h=t[3],u=t[4],d=t[5],c=e[0],l=e[1],p=e[2],f=e[3],x=e[4],v=e[5];i[0]=c*n+l*h,i[1]=c*o+l*u,i[2]=c*a+l*d+p,i[3]=f*n+x*h,i[4]=f*o+x*u,i[5]=f*a+x*d+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},r.DisplayObjectContainer=function(){r.DisplayObject.call(this),this.children=[],this.renderable=!1},r.DisplayObjectContainer.constructor=r.DisplayObjectContainer,r.DisplayObjectContainer.prototype=Object.create(r.DisplayObject.prototype),r.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},r.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},r.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},r.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},r.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){r.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},r.blendModes={},r.blendModes.NORMAL=0,r.blendModes.SCREEN=1,r.Sprite=function(t){r.DisplayObjectContainer.call(this),this.anchor=new r.Point,this.texture=t,this.blendMode=r.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Sprite.constructor=r.Sprite,r.Sprite.prototype=Object.create(r.DisplayObjectContainer.prototype),Object.defineProperty(r.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(r.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),r.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},r.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},r.Sprite.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new r.Sprite(e)},r.Sprite.fromImage=function(t){var e=r.Texture.fromImage(t);return new r.Sprite(e)},r.MovieClip=function(t){r.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},r.MovieClip.constructor=r.MovieClip,r.MovieClip.prototype=Object.create(r.Sprite.prototype),r.MovieClip.prototype.stop=function(){this.playing=!1},r.MovieClip.prototype.play=function(){this.playing=!0},r.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},r.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},r.MovieClip.prototype.updateTransform=function(){if(r.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},r.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),r.Sprite.call(this,r.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.Text.constructor=r.Text,r.Text.prototype=Object.create(r.Sprite.prototype),r.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},r.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},r.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],s=0,n=0;e.length>n;n++){var o=this.context.measureText(e[n]).width;i[n]=o,s=Math.max(s,o)}this.canvas.width=s+this.style.strokeThickness;var a=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=a*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",n=0;e.length>n;n++){var h=new r.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+n*a);"right"==this.style.align?h.x+=s-i[n]:"center"==this.style.align&&(h.x+=(s-i[n])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[n],h.x,h.y),this.style.fill&&this.context.fillText(e[n],h.x,h.y)}this.updateTexture()},r.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,r.texturesToUpdate.push(this.texture.baseTexture)},r.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),r.Sprite.prototype.updateTransform.call(this)},r.Text.prototype.determineFontHeight=function(t){var e=r.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],s=document.createElement("div"),n=document.createTextNode("M");s.appendChild(n),s.setAttribute("style",t),i.appendChild(s),e=s.offsetHeight,r.Text.heightCache[t]=e,i.removeChild(s)}return e},r.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,s){var n=Math.floor((r-i)/2)+i;return n==i?1:s>=t.measureText(e.substring(0,n)).width?t.measureText(e.substring(0,n+1)).width>s?n:arguments.callee(t,e,n,r,s):arguments.callee(t,e,i,n,s)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var s=e(t,i,0,i.length,r);return i.substring(0,s)+"\n"+arguments.callee(t,i.substring(s),r)},r="",s=t.split("\n"),n=0;s.length>n;n++)r+=i(this.context,s[n],this.style.wordWrapWidth)+"\n";return r},r.Text.prototype.destroy=function(t){t&&this.texture.destroy()},r.Text.heightCache={},r.BitmapText=function(t,e){r.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},r.BitmapText.constructor=r.BitmapText,r.BitmapText.prototype=Object.create(r.DisplayObjectContainer.prototype),r.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},r.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):r.BitmapText.fonts[this.fontName].size,this.dirty=!0},r.BitmapText.prototype.updateText=function(){for(var t=r.BitmapText.fonts[this.fontName],e=new r.Point,i=null,s=[],n=0,o=[],a=0,h=this.fontSize/t.size,u=0;this.text.length>u;u++){var d=this.text.charCodeAt(u);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(u)))o.push(e.x),n=Math.max(n,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[d];c&&(i&&c[i]&&(e.x+=c.kerning[i]),s.push({texture:c.texture,line:a,charCode:d,position:new r.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=d)}}o.push(e.x),n=Math.max(n,e.x);var l=[];for(u=0;a>=u;u++){var p=0;"right"==this.style.align?p=n-o[u]:"center"==this.style.align&&(p=(n-o[u])/2),l.push(p)}for(u=0;s.length>u;u++){var f=new r.Sprite(s[u].texture);f.position.x=(s[u].position.x+l[s[u].line])*h,f.position.y=s[u].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},r.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}r.DisplayObjectContainer.prototype.updateTransform.call(this)},r.BitmapText.fonts={},r.InteractionManager=function(t){this.stage=t,this.tempPoint=new r.Point,this.mouseoverEnabled=!0,this.mouse=new r.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},r.InteractionManager.constructor=r.InteractionManager,r.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},r.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},r.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}}},r.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},r.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},r.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},r.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof r.Sprite){var s=t.worldTransform,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,f=t.texture.frame.width,x=t.texture.frame.height,v=-f*t.anchor.x;if(l>v&&v+f>l){var g=-x*t.anchor.y;if(p>g&&g+x>p)return e.target=t,!0}}else if(t.hitArea){var s=t.worldTransform,b=t.hitArea,n=s[0],o=s[1],a=s[2],h=s[3],u=s[4],d=s[5],c=1/(n*u+o*-h),l=u*c*i.x+-o*c*i.y+(d*o-a*u)*c,p=n*c*i.y+-h*c*i.x+(-d*n+a*h)*c,v=b.x;if(l>v&&v+b.width>l){var g=b.y;if(p>g&&g+b.height>p)return!0}}for(var T=t.children.length,m=0;T>m;m++){var y=t.children[m],_=this.hitTest(y,e);if(_)return!0}return!1},r.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var o=this.interactiveItems.length,r=0;o>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},r.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,s=0;i.length>s;s++){var n=i[s],o=this.pool.pop();o||(o=new r.InteractionData),this.touchs[n.identifier]=o,o.global.x=(n.clientX-e.left)*(this.target.width/e.width),o.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h];if((u.touchstart||u.tap)&&(u.__hit=this.hitTest(u,o),u.__hit&&(u.touchstart&&u.touchstart(o),u.__isDown=!0,u.__touchData=o,!u.interactiveChildren)))break}}},r.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],o=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,h=0;a>h;h++){var u=this.interactiveItems[h],d=u.__touchData;u.__hit=this.hitTest(u,n),d==n&&((u.touchend||u.tap)&&(u.__hit&&!o?(u.touchend&&u.touchend(n),u.__isDown&&u.tap&&u.tap(n),u.interactiveChildren||(o=!0)):u.__isDown&&u.touchendoutside&&u.touchendoutside(n),u.__isDown=!1),u.__touchData=null)}this.pool.push(n),this.touchs[s.identifier]=null}},r.InteractionData=function(){this.global=new r.Point,this.local=new r.Point,this.target},r.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,s=e[0],n=e[1],o=e[2],a=e[3],h=e[4],u=e[5],d=1/(s*h+n*-a);return new r.Point(h*d*i.x+-n*d*i.y+(u*n-o*h)*d,s*d*i.y+-a*d*i.x+(-u*s+o*a)*d)},r.InteractionData.constructor=r.InteractionData,r.Stage=function(t,e){r.DisplayObjectContainer.call(this),this.worldTransform=r.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new r.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new r.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0},r.Stage.constructor=r.Stage,r.Stage.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},r.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},r.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},r.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},r.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};r.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),r.mat3={},r.mat3.create=function(){var t=new r.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},r.mat4={},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=e[0],p=e[1],f=e[2],x=e[3],v=e[4],g=e[5],b=e[6],T=e[7],m=e[8];return i[0]=l*r+p*o+f*u,i[1]=l*s+p*a+f*d,i[2]=l*n+p*h+f*c,i[3]=x*r+v*o+g*u,i[4]=x*s+v*a+g*d,i[5]=x*n+v*h+g*c,i[6]=b*r+T*o+m*u,i[7]=b*s+T*a+m*d,i[8]=b*n+T*h+m*c,i},r.mat3.toMat4=function(t,e){return e||(e=r.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},r.mat4.create=function(){var t=new r.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},r.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},r.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],a=t[4],h=t[5],u=t[6],d=t[7],c=t[8],l=t[9],p=t[10],f=t[11],x=t[12],v=t[13],g=t[14],b=t[15],T=e[0],m=e[1],y=e[2],_=e[3];return i[0]=T*r+m*a+y*c+_*x,i[1]=T*s+m*h+y*l+_*v,i[2]=T*n+m*u+y*p+_*g,i[3]=T*o+m*d+y*f+_*b,T=e[4],m=e[5],y=e[6],_=e[7],i[4]=T*r+m*a+y*c+_*x,i[5]=T*s+m*h+y*l+_*v,i[6]=T*n+m*u+y*p+_*g,i[7]=T*o+m*d+y*f+_*b,T=e[8],m=e[9],y=e[10],_=e[11],i[8]=T*r+m*a+y*c+_*x,i[9]=T*s+m*h+y*l+_*v,i[10]=T*n+m*u+y*p+_*g,i[11]=T*o+m*d+y*f+_*b,T=e[12],m=e[13],y=e[14],_=e[15],i[12]=T*r+m*a+y*c+_*x,i[13]=T*s+m*h+y*l+_*v,i[14]=T*n+m*u+y*p+_*g,i[15]=T*o+m*d+y*f+_*b,i},r.autoDetectRenderer=function(t,e,i,s){t||(t=800),e||(e=600);var n=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return n?new r.WebGLRenderer(t,e,i,s):new r.CanvasRenderer(t,e,i,s)},r.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],r.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],r.CompileVertexShader=function(t,e){return r._CompileShader(t,e,t.VERTEX_SHADER)},r.CompileFragmentShader=function(t,e){return r._CompileShader(t,e,t.FRAGMENT_SHADER)},r._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},r._defaultFrame=new r.Rectangle(0,0,1,1),r.gl,r.WebGLRenderer=function(t,e,i,s){this.transparent=!!s,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var n=this;this.view.addEventListener("webglcontextlost",function(t){n.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){n.handleContextRestored(t)},!1),this.batchs=[];try{r.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(o){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var a=this.gl;r.WebGLRenderer.gl=a,this.batch=new r.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),a.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=r.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new r.WebGLRenderGroup(this.gl)},r.WebGLRenderer.constructor=r.WebGLRenderer,r.WebGLRenderer.getBatch=function(){return 0==r._batchs.length?new r.WebGLBatch(r.WebGLRenderer.gl):r._batchs.pop()},r.WebGLRenderer.returnBatch=function(t){t.clean(),r._batchs.push(t)},r.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=r.CompileFragmentShader(t,r.shaderFragmentSrc),i=r.CompileVertexShader(t,r.shaderVertexSrc);r.shaderProgram=t.createProgram();var s=r.shaderProgram;t.attachShader(s,i),t.attachShader(s,e),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(s),s.vertexPositionAttribute=t.getAttribLocation(s,"aVertexPosition"),t.enableVertexAttribArray(s.vertexPositionAttribute),s.textureCoordAttribute=t.getAttribLocation(s,"aTextureCoord"),t.enableVertexAttribArray(s.textureCoordAttribute),s.colorAttribute=t.getAttribLocation(s,"aColor"),t.enableVertexAttribArray(s.colorAttribute),s.mvMatrixUniform=t.getUniformLocation(s,"uMVMatrix"),s.samplerUniform=t.getUniformLocation(s,"uSampler")},r.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),r.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0){for(var i=0;r.Texture.frameUpdates.length>i;i++)r.Texture.frameUpdates[i].updateFrame=!1;r.Texture.frameUpdates=[]}}},r.WebGLRenderer.updateTextures=function(){for(var t=0;r.texturesToUpdate.length>t;t++)this.updateTexture(r.texturesToUpdate[t]);for(var t=0;r.texturesToDestroy.length>t;t++)this.destroyTexture(r.texturesToDestroy[t]);r.texturesToUpdate=[],r.texturesToDestroy=[]},r.WebGLRenderer.updateTexture=function(t){var e=r.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},r.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},r.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},r.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},r.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;r.TextureCache.length>t;t++)this.updateTexture(r.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;r._restoreBatchs(this.gl),this.contextLost=!1},r._batchs=[],r._getBatch=function(t){return 0==r._batchs.length?new r.WebGLBatch(t):r._batchs.pop()},r._returnBatch=function(t){t.clean(),r._batchs.push(t)},r._restoreBatchs=function(t){for(var e=0;r._batchs.length>e;e++)r._batchs[e].restoreLostContext(t)},r.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=r.blendModes.NORMAL,this.dynamicSize=1},r.WebGLBatch.constructor=r.WebGLBatch,r.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},r.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},r.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},r.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},r.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},r.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},r.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new r.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},r.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},r.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},r.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizes;s++)i=this.batchs[s],i instanceof r.WebGLBatch?this.batchs[s].render():i instanceof r.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof r.Strip&&i.visible&&this.renderStrip(i,t)},r.WebGLRenderGroup.prototype.renderSpecific=function(t,e){r.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(r.shaderProgram.mvMatrixUniform,!1,e);var s,n,o,a,h=t.renderable?t:this.getNextRenderable(t),u=h.batch;if(h instanceof r.Sprite){u=h.batch;var d=u.head;if(d==h)s=0;else for(s=1;d.__next!=h;)s++,d=d.__next}else u=h;for(var c,l=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(l=p);if(l instanceof r.Sprite){c=l.batch;var d=c.head;if(d==l)o=0;else for(o=1;d.__next!=l;)o++,d=d.__next}else c=l;if(u==c)return u instanceof r.WebGLBatch?u.render(s,o+1):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e),void 0;n=this.batchs.indexOf(u),a=this.batchs.indexOf(c),u instanceof r.WebGLBatch?u.render(s):u instanceof r.TilingSprite?u.visible&&this.renderTilingSprite(u,e):u instanceof r.Strip?u.visible&&this.renderStrip(u,e):u instanceof r.CustomRenderable&&u.visible&&u.renderWebGL(this,e);for(var f=n+1;a>f;f++)renderable=this.batchs[f],renderable instanceof r.WebGLBatch?this.batchs[f].render():renderable instanceof r.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof r.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof r.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof r.WebGLBatch?c.render(0,o+1):c instanceof r.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof r.Strip?c.visible&&this.renderStrip(c):c instanceof r.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},r.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r];s.worldVisible=s.visible&&e,s.textureChange&&(s.textureChange=!1,s.worldVisible&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.children.length>0&&this.checkVisibility(s,s.worldVisible)}},r.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof r.Sprite){var s,n;if(e instanceof r.Sprite){if(s=e.batch,s&&s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertAfter(t,e),void 0}else s=e;if(i)if(i instanceof r.Sprite){if(n=i.batch){if(n.texture==t.texture.baseTexture&&n.blendMode==t.blendMode)return n.insertBefore(t,i),void 0;if(n==s){var o=s.split(i),a=r.WebGLRenderer.getBatch(),h=this.batchs.indexOf(s);return a.init(t),this.batchs.splice(h+1,0,a,o),void 0}}}else n=i;var a=r.WebGLRenderer.getBatch();if(a.init(t),s){var h=this.batchs.indexOf(s);this.batchs.splice(h+1,0,a)}else this.batchs.push(a)}else t instanceof r.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof r.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},r.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},r.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof r.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var s=this.batchs.indexOf(e);if(-1==s)return;if(0==s||s==this.batchs.length-1)return this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[s-1]instanceof r.WebGLBatch&&this.batchs[s+1]instanceof r.WebGLBatch&&this.batchs[s-1].texture==this.batchs[s+1].texture&&this.batchs[s-1].blendMode==this.batchs[s+1].blendMode)return this.batchs[s-1].merge(this.batchs[s+1]),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e),r.WebGLRenderer.returnBatch(this.batchs[s+1]),this.batchs.splice(s,2),void 0;this.batchs.splice(s,1),e instanceof r.WebGLBatch&&r.WebGLRenderer.returnBatch(e)}}},r.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},r.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},r.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},r.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,s=r.shaderProgram,n=r.mat3.toMat4(t.worldTransform);r.mat4.transpose(n),r.mat4.multiply(e,n,n),i.uniformMatrix4fv(s.mvMatrixUniform,!1,n),t.blendMode==r.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(s.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(s.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(s.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(s.mvMatrixUniform,!1,e)},r.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;r.shaderProgram;var s=t.tilePosition,n=t.tileScale,o=s.x/t.texture.baseTexture.width,a=s.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/n.x,u=t.height/t.texture.baseTexture.height/n.y;t.uvs[0]=0-o,t.uvs[1]=0-a,t.uvs[2]=1*h-o,t.uvs[3]=0-a,t.uvs[4]=1*h-o,t.uvs[5]=1*u-a,t.uvs[6]=0-o,t.uvs[7]=1*u-a,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},r.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},r.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},r.CanvasRenderer.constructor=r.CanvasRenderer,r.CanvasRenderer.prototype.render=function(t){r.texturesToUpdate=[],r.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),r.Texture.frameUpdates.length>0&&(r.Texture.frameUpdates=[])},r.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},r.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof r.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,t.anchor.x*-s.width,t.anchor.y*-s.height,s.width,s.height))}else t instanceof r.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof r.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof r.CustomRenderable&&t.renderCanvas(this);for(var n=0;t.children.length>n;n++)this.renderDisplayObject(t.children[n]);this.context.setTransform(1,0,0,1,0,0)}},r.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],a=i[n+2],h=i[n+4],u=i[n+1],d=i[n+3],c=i[n+5];e.moveTo(o,u),e.lineTo(a,d),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},r.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},r.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,a=i[o],h=i[o+2],u=i[o+4],d=i[o+1],c=i[o+3],l=i[o+5],p=r[o]*t.texture.width,f=r[o+2]*t.texture.width,x=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,b=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,d),e.lineTo(h,c),e.lineTo(u,l),e.closePath(),e.clip();var T=p*g+v*x+f*b-g*x-v*f-p*b,m=a*g+v*u+h*b-g*u-v*h-a*b,y=p*h+a*x+f*u-h*x-a*f-p*u,_=p*g*u+v*h*x+a*f*b-a*g*x-v*f*u-p*h*b,R=d*g+v*l+c*b-g*l-v*c-d*b,w=p*c+d*x+f*l-c*x-d*f-p*l,A=p*g*l+v*c*x+d*f*b-d*g*x-v*f*l-p*c*b;e.transform(m/T,R/T,y/T,w/T,_/T,A/T),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},r.Strip=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=r.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(s){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},r.Strip.constructor=r.Strip,r.Strip.prototype=Object.create(r.DisplayObjectContainer.prototype),r.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},r.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.Rope=function(t,e){r.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},r.Rope.constructor=r.Rope,r.Rope.prototype=Object.create(r.Strip.prototype),r.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,a=1;o>a;a++){var n=t[a],h=4*a,u=a/(o-1);a%2?(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1):(e[h]=u,e[h+1]=0,e[h+2]=u,e[h+3]=1),h=2*a,r[h]=1,r[h+1]=1,h=2*a,i[h]=h,i[h+1]=h+1,s=n}}},r.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,s=t[0],n={x:0,y:0},o=t[0];this.count-=.2,i[0]=o.x+n.x,i[1]=o.y+n.y,i[2]=o.x-n.x,i[3]=o.y-n.y;for(var a=t.length,h=1;a>h;h++){var o=t[h],u=4*h;e=t.length-1>h?t[h+1]:o,n.y=-(e.x-s.x),n.x=e.y-s.y;var d=10*(1-h/(a-1));d>1&&(d=1);var c=Math.sqrt(n.x*n.x+n.y*n.y),l=this.texture.height/2;n.x/=c,n.y/=c,n.x*=l,n.y*=l,i[u]=o.x+n.x,i[u+1]=o.y+n.y,i[u+2]=o.x-n.x,i[u+3]=o.y-n.y,s=o}r.DisplayObjectContainer.prototype.updateTransform.call(this)}},r.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite=function(t,e,i){r.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new r.Point(1,1),this.tilePosition=new r.Point(0,0),this.blendMode=r.blendModes.NORMAL},r.TilingSprite.constructor=r.TilingSprite,r.TilingSprite.prototype=Object.create(r.DisplayObjectContainer.prototype),r.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},r.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},r.CustomRenderable=function(){r.DisplayObject.call(this)},r.CustomRenderable.constructor=r.CustomRenderable,r.CustomRenderable.prototype=Object.create(r.DisplayObject.prototype),r.CustomRenderable.prototype.renderCanvas=function(){},r.CustomRenderable.prototype.initWebGL=function(){},r.CustomRenderable.prototype.renderWebGL=function(){},r.BaseTextureCache={},r.texturesToUpdate=[],r.texturesToDestroy=[],r.BaseTexture=function(t){if(r.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,r.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,r.texturesToUpdate.push(this);this._powerOf2=!1}},r.BaseTexture.constructor=r.BaseTexture,r.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,r.texturesToDestroy.push(this)},r.BaseTexture.fromImage=function(t,e){var i=r.BaseTextureCache[t];if(!i){var s=new Image;e&&(s.crossOrigin=""),s.src=t,i=new r.BaseTexture(s),r.BaseTextureCache[t]=i}return i},r.TextureCache={},r.FrameCache={},r.Texture=function(t,e){if(r.EventTarget.call(this),e||(this.noFrame=!0,e=new r.Rectangle(0,0,1,1)),this.trim=new r.Point,t instanceof r.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new r.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},r.Texture.constructor=r.Texture,r.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new r.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},r.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},r.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,r.Texture.frameUpdates.push(this)},r.Texture.fromImage=function(t,e){var i=r.TextureCache[t];return i||(i=new r.Texture(r.BaseTexture.fromImage(t,e)),r.TextureCache[t]=i),i},r.Texture.fromFrame=function(t){var e=r.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},r.Texture.fromCanvas=function(t){var e=new r.BaseTexture(t);return new r.Texture(e)},r.Texture.addTextureToCache=function(t,e){r.TextureCache[e]=t},r.Texture.removeTextureFromCache=function(t){var e=r.TextureCache[t];return r.TextureCache[t]=null,e},r.Texture.frameUpdates=[],r.RenderTexture=function(t,e){r.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=r.mat3.create(),this.frame=new r.Rectangle(0,0,this.width,this.height),r.gl?this.initWebGL():this.initCanvas()},r.RenderTexture.constructor=r.RenderTexture,r.RenderTexture.prototype=Object.create(r.Texture.prototype),r.RenderTexture.prototype.initWebGL=function(){var t=r.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new r.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=r.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},r.RenderTexture.prototype.initCanvas=function(){this.renderer=new r.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new r.BaseTexture(this.renderer.view),this.frame=new r.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},r.RenderTexture.prototype.renderWebGL=function(t,e){var i=r.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var s=t.children;t.worldTransform=r.mat3.create();for(var n=0,o=s.length;o>n;n++)s[n].updateTransform();var a=t.__renderGroup;a?t==a.root?a.render(this.projectionMatrix):a.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new r.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},r.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=r.mat3.create();for(var s=0,n=i.length;n>s;s++)i[s].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),r.texturesToUpdate.push(this.baseTexture)},r.AssetLoader=function(t){r.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:r.ImageLoader,jpeg:r.ImageLoader,png:r.ImageLoader,gif:r.ImageLoader,json:r.SpriteSheetLoader,xml:r.BitmapFontLoader,fnt:r.BitmapFontLoader}},r.AssetLoader.constructor=r.AssetLoader,r.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.load()}},r.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},r.JsonLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e},r.JsonLoader.constructor=r.JsonLoader,r.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},r.JsonLoader.prototype.onJSONLoaded=function(){4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http")?(this.json=JSON.parse(this.ajaxRequest.responseText),this.onLoaded()):this.onError())},r.JsonLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},r.SpriteSheetLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},r.SpriteSheetLoader.constructor=r.SpriteSheetLoader,r.SpriteSheetLoader.prototype.load=function(){var t=this,e=new r.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},r.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new r.ImageLoader(e,this.crossorigin),s=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var n in s){var o=s[n].frame;o&&(r.TextureCache[n]=new r.Texture(this.texture,{x:o.x,y:o.y,width:o.w,height:o.h}),s[n].trimmed&&(r.TextureCache[n].realSize=s[n].spriteSourceSize,r.TextureCache[n].trim.x=0))}i.load()},r.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.ImageLoader=function(t,e){r.EventTarget.call(this),this.texture=r.Texture.fromImage(t,e)},r.ImageLoader.constructor=r.ImageLoader,r.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},r.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},r.BitmapFontLoader=function(t,e){r.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},r.BitmapFontLoader.constructor=r.BitmapFontLoader,r.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},r.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new r.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},s=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],n=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=s.attributes.getNamedItem("face").nodeValue,i.size=parseInt(s.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(n.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var o=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;o.length>a;a++){var h=parseInt(o[a].attributes.getNamedItem("id").nodeValue,10),u={x:parseInt(o[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(o[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(o[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(o[a].attributes.getNamedItem("height").nodeValue,10)};r.TextureCache[h]=new r.Texture(this.texture,u),i.chars[h]={xOffset:parseInt(o[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(o[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(o[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new r.Texture(this.texture,u)}}var d=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;d.length>a;a++){var c=parseInt(d[a].attributes.getNamedItem("first").nodeValue,10),l=parseInt(d[a].attributes.getNamedItem("second").nodeValue,10),p=parseInt(d[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[l].kerning[c]=p}r.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},r.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=r),exports.PIXI=r):i.PIXI=r}).call(this); \ No newline at end of file +(function(){function t(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function e(){return n.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,n.Matrix}var i=this,n=n||{};n.Point=function(t,e){this.x=t||0,this.y=e||0},n.Point.prototype.clone=function(){return new n.Point(this.x,this.y)},n.Point.constructor=n.Point,n.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},n.Rectangle.prototype.clone=function(){return new n.Rectangle(this.x,this.y,this.width,this.height)},n.Rectangle.constructor=n.Rectangle,n.DisplayObject=function(){this.position=new n.Point,this.scale=new n.Point(1,1),this.pivot=new n.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.worldVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=n.mat3.create(),this.localTransform=n.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.childIndex=0,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},n.DisplayObject.constructor=n.DisplayObject,n.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},n.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y;var r=this.pivot.x,n=this.pivot.y;t[2]=this.position.x-t[0]*r-n*t[1],t[5]=this.position.y-t[4]*n-r*t[3];var s=t[0],a=t[1],o=t[2],h=t[3],l=t[4],u=t[5],c=e[0],d=e[1],p=e[2],f=e[3],m=e[4],v=e[5];i[0]=c*s+d*h,i[1]=c*a+d*l,i[2]=c*o+d*u+p,i[3]=f*s+m*h,i[4]=f*a+m*l,i[5]=f*o+m*u+v,this.worldAlpha=this.alpha*this.parent.worldAlpha},n.DisplayObjectContainer=function(){n.DisplayObject.call(this),this.children=[],this.renderable=!1},n.DisplayObjectContainer.constructor=n.DisplayObjectContainer,n.DisplayObjectContainer.prototype=Object.create(n.DisplayObject.prototype),n.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t),this.__renderGroup&&(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),this.__renderGroup.addDisplayObjectAndChildren(t))},n.DisplayObjectContainer.prototype.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},n.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},n.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},n.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){n.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},n.blendModes={},n.blendModes.NORMAL=0,n.blendModes.SCREEN=1,n.Sprite=function(t){n.DisplayObjectContainer.call(this),this.anchor=new n.Point,this.texture=t,this.blendMode=n.blendModes.NORMAL,this._width=0,this._height=0,t.baseTexture.hasLoaded?this.updateFrame=!0:(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Sprite.constructor=n.Sprite,n.Sprite.prototype=Object.create(n.DisplayObjectContainer.prototype),Object.defineProperty(n.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(n.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),n.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},n.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height),this.updateFrame=!0},n.Sprite.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new n.Sprite(e)},n.Sprite.fromImage=function(t){var e=n.Texture.fromImage(t);return new n.Sprite(e)},n.MovieClip=function(t){n.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.loop=!0,this.onComplete=null,this.playing},n.MovieClip.constructor=n.MovieClip,n.MovieClip.prototype=Object.create(n.Sprite.prototype),n.MovieClip.prototype.stop=function(){this.playing=!1},n.MovieClip.prototype.play=function(){this.playing=!0},n.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},n.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},n.MovieClip.prototype.updateTransform=function(){if(n.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},n.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),n.Sprite.call(this,n.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.Text.constructor=n.Text,n.Text.prototype=Object.create(n.Sprite.prototype),n.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,t.wordWrap=t.wordWrap||!1,t.wordWrapWidth=t.wordWrapWidth||100,this.style=t,this.dirty=!0},n.Sprite.prototype.setText=function(t){this.text=""+t||" ",this.dirty=!0},n.Text.prototype.updateText=function(){this.context.font=this.style.font;var t=this.text;this.style.wordWrap&&(t=this.wordWrap(this.text));for(var e=t.split(/(?:\r\n|\r|\n)/),i=[],r=0,s=0;e.length>s;s++){var a=this.context.measureText(e[s]).width;i[s]=a,r=Math.max(r,a)}this.canvas.width=r+this.style.strokeThickness;var o=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=o*e.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",s=0;e.length>s;s++){var h=new n.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+s*o);"right"==this.style.align?h.x+=r-i[s]:"center"==this.style.align&&(h.x+=(r-i[s])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(e[s],h.x,h.y),this.style.fill&&this.context.fillText(e[s],h.x,h.y)}this.updateTexture()},n.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,this._width=this.canvas.width,this._height=this.canvas.height,n.texturesToUpdate.push(this.texture.baseTexture)},n.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),n.Sprite.prototype.updateTransform.call(this)},n.Text.prototype.determineFontHeight=function(t){var e=n.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,n.Text.heightCache[t]=e,i.removeChild(r)}return e},n.Text.prototype.wordWrap=function(t){for(var e=function(t,e,i,r,n){var s=Math.floor((r-i)/2)+i;return s==i?1:n>=t.measureText(e.substring(0,s)).width?t.measureText(e.substring(0,s+1)).width>n?s:arguments.callee(t,e,s,r,n):arguments.callee(t,e,i,s,n)},i=function(t,i,r){if(r>=t.measureText(i).width||1>i.length)return i;var n=e(t,i,0,i.length,r);return i.substring(0,n)+"\n"+arguments.callee(t,i.substring(n),r)},r="",n=t.split("\n"),s=0;n.length>s;s++)r+=i(this.context,n[s],this.style.wordWrapWidth)+"\n";return r},n.Text.prototype.destroy=function(t){t&&this.texture.destroy()},n.Text.heightCache={},n.BitmapText=function(t,e){n.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},n.BitmapText.constructor=n.BitmapText,n.BitmapText.prototype=Object.create(n.DisplayObjectContainer.prototype),n.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},n.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):n.BitmapText.fonts[this.fontName].size,this.dirty=!0},n.BitmapText.prototype.updateText=function(){for(var t=n.BitmapText.fonts[this.fontName],e=new n.Point,i=null,r=[],s=0,a=[],o=0,h=this.fontSize/t.size,l=0;this.text.length>l;l++){var u=this.text.charCodeAt(l);if(/(?:\r\n|\r|\n)/.test(this.text.charAt(l)))a.push(e.x),s=Math.max(s,e.x),o++,e.x=0,e.y+=t.lineHeight,i=null;else{var c=t.chars[u];c&&(i&&c[i]&&(e.x+=c.kerning[i]),r.push({texture:c.texture,line:o,charCode:u,position:new n.Point(e.x+c.xOffset,e.y+c.yOffset)}),e.x+=c.xAdvance,i=u)}}a.push(e.x),s=Math.max(s,e.x);var d=[];for(l=0;o>=l;l++){var p=0;"right"==this.style.align?p=s-a[l]:"center"==this.style.align&&(p=(s-a[l])/2),d.push(p)}for(l=0;r.length>l;l++){var f=new n.Sprite(r[l].texture);f.position.x=(r[l].position.x+d[r[l].line])*h,f.position.y=r[l].position.y*h,f.scale.x=f.scale.y=h,this.addChild(f)}this.width=e.x*h,this.height=(e.y+t.lineHeight)*h},n.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}n.DisplayObjectContainer.prototype.updateTransform.call(this)},n.BitmapText.fonts={},n.InteractionManager=function(t){this.stage=t,this.tempPoint=new n.Point,this.mouseoverEnabled=!0,this.mouse=new n.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},n.InteractionManager.constructor=n.InteractionManager,n.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,n=r-1;n>=0;n--){var s=i[n];s.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(s),s.children.length>0&&this.collectInteractiveSprite(s,s)):(s.__iParent=null,s.children.length>0&&this.collectInteractiveSprite(s,e))}},n.InteractionManager.prototype.setTarget=function(t){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},n.InteractionManager.prototype.update=function(){if(this.target){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target.view.style.cursor="default";for(var i=0;r>i;i++){var n=this.interactiveItems[i];n.visible&&(n.mouseover||n.mouseout||n.buttonMode)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit?(n.buttonMode&&(this.target.view.style.cursor="pointer"),n.__isOver||(n.mouseover&&n.mouseover(this.mouse),n.__isOver=!0)):n.__isOver&&(n.mouseout&&n.mouseout(this.mouse),n.__isOver=!1))}}}},n.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var n=this.interactiveItems[r];n.mousemove&&n.mousemove(this.mouse)}},n.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},n.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var n=this.interactiveItems[r];(n.mouseup||n.mouseupoutside||n.click)&&(n.__hit=this.hitTest(n,this.mouse),n.__hit&&!i?(n.mouseup&&n.mouseup(this.mouse),n.__isDown&&n.click&&n.click(this.mouse),n.interactiveChildren||(i=!0)):n.__isDown&&n.mouseupoutside&&n.mouseupoutside(this.mouse),n.__isDown=!1)}},n.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof n.Sprite){var r=t.worldTransform,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,f=t.texture.frame.width,m=t.texture.frame.height,v=-f*t.anchor.x;if(d>v&&v+f>d){var g=-m*t.anchor.y;if(p>g&&g+m>p)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],a=r[1],o=r[2],h=r[3],l=r[4],u=r[5],c=1/(s*l+a*-h),d=l*c*i.x+-a*c*i.y+(u*a-o*l)*c,p=s*c*i.y+-h*c*i.x+(-u*s+o*h)*c,v=x.x;if(d>v&&v+x.width>d){var g=x.y;if(p>g&&g+x.height>p)return!0}}for(var b=t.children.length,T=0;b>T;T++){var y=t.children[T],_=this.hitTest(y,e);if(_)return!0}return!1},n.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier];s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height)}for(var a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.touchmove(s)}},n.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],a=this.pool.pop();a||(a=new n.InteractionData),this.touchs[s.identifier]=a,a.global.x=(s.clientX-e.left)*(this.target.width/e.width),a.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h];if((l.touchstart||l.tap)&&(l.__hit=this.hitTest(l,a),l.__hit&&(l.touchstart&&l.touchstart(a),l.__isDown=!0,l.__touchData=a,!l.interactiveChildren)))break}}},n.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var n=i[r],s=this.touchs[n.identifier],a=!1;s.global.x=(n.clientX-e.left)*(this.target.width/e.width),s.global.y=(n.clientY-e.top)*(this.target.height/e.height);for(var o=this.interactiveItems.length,h=0;o>h;h++){var l=this.interactiveItems[h],u=l.__touchData;l.__hit=this.hitTest(l,s),u==s&&((l.touchend||l.tap)&&(l.__hit&&!a?(l.touchend&&l.touchend(s),l.__isDown&&l.tap&&l.tap(s),l.interactiveChildren||(a=!0)):l.__isDown&&l.touchendoutside&&l.touchendoutside(s),l.__isDown=!1),l.__touchData=null)}this.pool.push(s),this.touchs[n.identifier]=null}},n.InteractionData=function(){this.global=new n.Point,this.local=new n.Point,this.target},n.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],a=e[2],o=e[3],h=e[4],l=e[5],u=1/(r*h+s*-o);return new n.Point(h*u*i.x+-s*u*i.y+(l*s-a*h)*u,r*u*i.y+-o*u*i.x+(-l*r+a*o)*u)},n.InteractionData.constructor=n.InteractionData,n.Stage=function(t,e){n.DisplayObjectContainer.call(this),this.worldTransform=n.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new n.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new n.InteractionManager(this),this.setBackgroundColor(t),this.worldVisible=!0,this.stage.dirty=!0},n.Stage.constructor=n.Stage,n.Stage.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},n.Stage.prototype.setBackgroundColor=function(e){this.backgroundColor=e||0,this.backgroundColorSplit=t(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},n.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},n.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},n.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var s=n.concat(t.call(arguments));r.apply(this instanceof i?this:e,s)}var r=this,n=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function s(t){return t&&(s.prototype=t),this instanceof s?void 0:new s}(r.prototype),i}}());var s=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};n.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},e(),n.mat3={},n.mat3.create=function(){var t=new n.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},n.mat4={},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=e[0],p=e[1],f=e[2],m=e[3],v=e[4],g=e[5],x=e[6],b=e[7],T=e[8];return i[0]=d*r+p*a+f*l,i[1]=d*n+p*o+f*u,i[2]=d*s+p*h+f*c,i[3]=m*r+v*a+g*l,i[4]=m*n+v*o+g*u,i[5]=m*s+v*h+g*c,i[6]=x*r+b*a+T*l,i[7]=x*n+b*o+T*u,i[8]=x*s+b*h+T*c,i},n.mat3.toMat4=function(t,e){return e||(e=n.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},n.mat4.create=function(){var t=new n.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},n.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],n=t[3],s=t[6],a=t[7],o=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=s,t[11]=t[14],t[12]=n,t[13]=a,t[14]=o,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},n.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],n=t[1],s=t[2],a=t[3],o=t[4],h=t[5],l=t[6],u=t[7],c=t[8],d=t[9],p=t[10],f=t[11],m=t[12],v=t[13],g=t[14],x=t[15],b=e[0],T=e[1],y=e[2],_=e[3];return i[0]=b*r+T*o+y*c+_*m,i[1]=b*n+T*h+y*d+_*v,i[2]=b*s+T*l+y*p+_*g,i[3]=b*a+T*u+y*f+_*x,b=e[4],T=e[5],y=e[6],_=e[7],i[4]=b*r+T*o+y*c+_*m,i[5]=b*n+T*h+y*d+_*v,i[6]=b*s+T*l+y*p+_*g,i[7]=b*a+T*u+y*f+_*x,b=e[8],T=e[9],y=e[10],_=e[11],i[8]=b*r+T*o+y*c+_*m,i[9]=b*n+T*h+y*d+_*v,i[10]=b*s+T*l+y*p+_*g,i[11]=b*a+T*u+y*f+_*x,b=e[12],T=e[13],y=e[14],_=e[15],i[12]=b*r+T*o+y*c+_*m,i[13]=b*n+T*h+y*d+_*v,i[14]=b*s+T*l+y*p+_*g,i[15]=b*a+T*u+y*f+_*x,i},n.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new n.WebGLRenderer(t,e,i,r):new n.CanvasRenderer(t,e,i,r)},n.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],n.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],n.CompileVertexShader=function(t,e){return n._CompileShader(t,e,t.VERTEX_SHADER)},n.CompileFragmentShader=function(t,e){return n._CompileShader(t,e,t.FRAGMENT_SHADER)},n._CompileShader=function(t,e,i){var r=e.join("\n"),n=t.createShader(i);return t.shaderSource(n,r),t.compileShader(n),t.getShaderParameter(n,t.COMPILE_STATUS)?n:(alert(t.getShaderInfoLog(n)),null)},n._defaultFrame=new n.Rectangle(0,0,1,1),n.gl,n.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{n.gl=this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!1})}catch(a){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;n.WebGLRenderer.gl=o,this.batch=new n.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.disable(o.CULL_FACE),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=n.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1,this.stageRenderGroup=new n.WebGLRenderGroup(this.gl)},n.WebGLRenderer.constructor=n.WebGLRenderer,n.WebGLRenderer.getBatch=function(){return 0==n._batchs.length?new n.WebGLBatch(n.WebGLRenderer.gl):n._batchs.pop()},n.WebGLRenderer.returnBatch=function(t){t.clean(),n._batchs.push(t)},n.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=n.CompileFragmentShader(t,n.shaderFragmentSrc),i=n.CompileVertexShader(t,n.shaderVertexSrc);n.shaderProgram=t.createProgram();var r=n.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler")},n.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage=t,this.stageRenderGroup.setRenderable(t)),n.WebGLRenderer.updateTextures(),t.updateTransform();var e=this.gl;if(e.colorMask(!0,!0,!0,this.transparent),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,null),e.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],!this.transparent),e.clear(e.COLOR_BUFFER_BIT),this.stageRenderGroup.backgroundColor=t.backgroundColorSplit,this.stageRenderGroup.render(this.projectionMatrix),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0){for(var i=0;n.Texture.frameUpdates.length>i;i++)n.Texture.frameUpdates[i].updateFrame=!1;n.Texture.frameUpdates=[]}}},n.WebGLRenderer.updateTextures=function(){for(var t=0;n.texturesToUpdate.length>t;t++)this.updateTexture(n.texturesToUpdate[t]);for(var t=0;n.texturesToDestroy.length>t;t++)this.destroyTexture(n.texturesToDestroy[t]);n.texturesToUpdate=[],n.texturesToDestroy=[]},n.WebGLRenderer.updateTexture=function(t){var e=n.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)),e.bindTexture(e.TEXTURE_2D,null))},n.WebGLRenderer.prototype.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},n.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},n.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},n.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;n.TextureCache.length>t;t++)this.updateTexture(n.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;n._restoreBatchs(this.gl),this.contextLost=!1},n._batchs=[],n._getBatch=function(t){return 0==n._batchs.length?new n.WebGLBatch(t):n._batchs.pop()},n._returnBatch=function(t){t.clean(),n._batchs.push(t)},n._restoreBatchs=function(t){for(var e=0;n._batchs.length>e;e++)n._batchs[e].restoreLostContext(t)},n.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=n.blendModes.NORMAL,this.dynamicSize=1},n.WebGLBatch.constructor=n.WebGLBatch,n.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},n.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},n.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},n.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},n.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},n.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},n.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new n.WebGLBatch(this.gl);e.init(t),e.texture=this.texture,e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},n.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},n.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,n=4*i;this.indices[r+0]=n+0,this.indices[r+1]=n+1,this.indices[r+2]=n+2,this.indices[r+3]=n+0,this.indices[r+4]=n+2,this.indices[r+5]=n+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},n.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizer;r++)i=this.batchs[r],i instanceof n.WebGLBatch?this.batchs[r].render():i instanceof n.TilingSprite?i.visible&&this.renderTilingSprite(i,t):i instanceof n.Strip&&i.visible&&this.renderStrip(i,t)},n.WebGLRenderGroup.prototype.renderSpecific=function(t,e){n.WebGLRenderer.updateTextures();var i=this.gl;this.checkVisibility(t,t.visible),i.uniformMatrix4fv(n.shaderProgram.mvMatrixUniform,!1,e);var r,s,a,o,h=t.renderable?t:this.getNextRenderable(t),l=h.batch;if(h instanceof n.Sprite){l=h.batch;var u=l.head;if(u==h)r=0;else for(r=1;u.__next!=h;)r++,u=u.__next}else l=h;for(var c,d=t,p=t;p.children.length>0;)p=p.children[p.children.length-1],p.renderable&&(d=p);if(d instanceof n.Sprite){c=d.batch;var u=c.head;if(u==d)a=0;else for(a=1;u.__next!=d;)a++,u=u.__next}else c=d;if(l==c)return l instanceof n.WebGLBatch?l.render(r,a+1):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e),void 0;s=this.batchs.indexOf(l),o=this.batchs.indexOf(c),l instanceof n.WebGLBatch?l.render(r):l instanceof n.TilingSprite?l.visible&&this.renderTilingSprite(l,e):l instanceof n.Strip?l.visible&&this.renderStrip(l,e):l instanceof n.CustomRenderable&&l.visible&&l.renderWebGL(this,e);for(var f=s+1;o>f;f++)renderable=this.batchs[f],renderable instanceof n.WebGLBatch?this.batchs[f].render():renderable instanceof n.TilingSprite?renderable.visible&&this.renderTilingSprite(renderable,e):renderable instanceof n.Strip?renderable.visible&&this.renderStrip(renderable,e):renderable instanceof n.CustomRenderable&&renderable.visible&&renderable.renderWebGL(this,e);c instanceof n.WebGLBatch?c.render(0,a+1):c instanceof n.TilingSprite?c.visible&&this.renderTilingSprite(c):c instanceof n.Strip?c.visible&&this.renderStrip(c):c instanceof n.CustomRenderable&&c.visible&&c.renderWebGL(this,e)},n.WebGLRenderGroup.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var n=i[r];n.worldVisible=n.visible&&e,n.textureChange&&(n.textureChange=!1,n.worldVisible&&(this.removeDisplayObject(n),this.addDisplayObject(n))),n.children.length>0&&this.checkVisibility(n,n.worldVisible)}},n.WebGLRenderGroup.prototype.updateTexture=function(t){if(1==t.batch.length)return t.batch.texture=t.texture.baseTexture,void 0;if(t.batch.texture!=t.texture.baseTexture)if(t.batch.head==t){var e=t.batch,i=this.batchs.indexOf(e),r=this.batchs[i-1];if(e.remove(t),r)if(r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)r.insertAfter(t,r.tail);else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i-1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(0,0,s)}}else if(t.batch.tail==t){var e=t.batch,i=this.batchs.indexOf(e),a=this.batchs[i+1];if(e.remove(t),a){if(a.texture==t.texture.baseTexture&&a.blendMode==t.blendMode)return a.insertBefore(t,a.head),void 0;var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.splice(i+1,0,s)}else{var s=n.WebGLRenderer.getBatch();s.init(t),this.batchs.push(s)}}else{var e=t.batch,o=e.split(t);o.remove(t);var s=n.WebGLRenderer.getBatch(),i=this.batchs.indexOf(e);s.init(t),this.batchs.splice(i+1,0,s,o)}},n.WebGLRenderGroup.prototype.addDisplayObject=function(t){if(t.__renderGroup&&t.__renderGroup.removeDisplayObjectAndChildren(t),t.__renderGroup=this,t.renderable){var e=this.getPreviousRenderable(t),i=this.getNextRenderable(t);if(t instanceof n.Sprite){var r,s;if(e instanceof n.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof n.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var a=r.split(i),o=n.WebGLRenderer.getBatch(),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,a),void 0}}}else s=i;var o=n.WebGLRenderer.getBatch();if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof n.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):t instanceof n.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},n.WebGLRenderGroup.prototype.addDisplayObjectAndChildren=function(t){this.addDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.addDisplayObjectAndChildren(e[i])},n.WebGLRenderGroup.prototype.removeDisplayObject=function(t){if(t.__renderGroup=null,t.renderable){var e;if(t instanceof n.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),void 0;if(this.batchs[r-1]instanceof n.WebGLBatch&&this.batchs[r+1]instanceof n.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e),n.WebGLRenderer.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof n.WebGLBatch&&n.WebGLRenderer.returnBatch(e)}}},n.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren=function(t){if(t.__renderGroup==this){this.removeDisplayObject(t);for(var e=t.children,i=0;e.length>i;i++)this.removeDisplayObjectAndChildren(e[i])}},n.WebGLRenderGroup.prototype.getNextRenderable=function(t){var e=t;do{if(0==e.children.length){if(!e.parent)return null;for(;e.childIndex==e.parent.children.length-1;)if(e=e.parent,e==this.root||!e.parent){e=null;break}e&&(e=e.parent.children[e.childIndex+1])}else e=e.children[0];if(!e)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.getPreviousRenderable=function(t){var e=t;do{if(0==e.childIndex){if(e=e.parent,!e)return null}else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==this.root)break}while(!e.renderable||!e.__renderGroup);return e},n.WebGLRenderGroup.prototype.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},n.WebGLRenderGroup.prototype.renderStrip=function(t,e){var i=this.gl,r=n.shaderProgram,s=n.mat3.toMat4(t.worldTransform);n.mat4.transpose(s),n.mat4.multiply(e,s,s),i.uniformMatrix4fv(r.mvMatrixUniform,!1,s),t.blendMode==n.blendModes.NORMAL?i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA):i.blendFunc(i.ONE,i.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferData(i.ARRAY_BUFFER,t.verticies,i.STATIC_DRAW),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferData(i.ARRAY_BUFFER,t.uvs,i.STATIC_DRAW),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.bufferData(i.ARRAY_BUFFER,t.colors,i.STATIC_DRAW),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer),i.bufferData(i.ELEMENT_ARRAY_BUFFER,t.indices,i.STATIC_DRAW)):(i.bindBuffer(i.ARRAY_BUFFER,t._vertexBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.verticies),i.vertexAttribPointer(r.vertexPositionAttribute,2,i.FLOAT,!1,0,0),i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.vertexAttribPointer(r.textureCoordAttribute,2,i.FLOAT,!1,0,0),i.activeTexture(i.TEXTURE0),i.bindTexture(i.TEXTURE_2D,t.texture.baseTexture._glTexture),i.bindBuffer(i.ARRAY_BUFFER,t._colorBuffer),i.vertexAttribPointer(r.colorAttribute,1,i.FLOAT,!1,0,0),i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),i.drawElements(i.TRIANGLE_STRIP,t.indices.length,i.UNSIGNED_SHORT,0),i.uniformMatrix4fv(r.mvMatrixUniform,!1,e)},n.WebGLRenderGroup.prototype.renderTilingSprite=function(t,e){var i=this.gl;n.shaderProgram;var r=t.tilePosition,s=t.tileScale,a=r.x/t.texture.baseTexture.width,o=r.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/s.x,l=t.height/t.texture.baseTexture.height/s.y;t.uvs[0]=0-a,t.uvs[1]=0-o,t.uvs[2]=1*h-a,t.uvs[3]=0-o,t.uvs[4]=1*h-a,t.uvs[5]=1*l-o,t.uvs[6]=0-a,t.uvs[7]=1*l-o,i.bindBuffer(i.ARRAY_BUFFER,t._uvBuffer),i.bufferSubData(i.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t,e)},n.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},n.CanvasRenderer=function(t,e,i,r){this.transparent=r,this.width=t||800,this.height=e||600,this.refresh=!0,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.count=0,this.context=this.view.getContext("2d")},n.CanvasRenderer.constructor=n.CanvasRenderer,n.CanvasRenderer.prototype.render=function(t){n.texturesToUpdate=[],n.texturesToDestroy=[],t.updateTransform(),this.view.style.backgroundColor==t.backgroundColorString||this.transparent||(this.view.style.backgroundColor=t.backgroundColorString),this.context.setTransform(1,0,0,1,0,0),this.context.clearRect(0,0,this.width,this.height),this.renderDisplayObject(t),t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),n.Texture.frameUpdates.length>0&&(n.Texture.frameUpdates=[])},n.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},n.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;if(t.visible){if(t instanceof n.Sprite){var r=t.texture.frame;r&&(i.globalAlpha=t.worldAlpha,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,r.x,r.y,r.width,r.height,t.anchor.x*-r.width,t.anchor.y*-r.height,r.width,r.height))}else t instanceof n.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof n.TilingSprite?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t)):t instanceof n.CustomRenderable&&t.renderCanvas(this);for(var s=0;t.children.length>s;s++)this.renderDisplayObject(t.children[s]);this.context.setTransform(1,0,0,1,0,0)}},n.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var n=1;r-2>n;n++){var s=2*n,a=i[s],o=i[s+2],h=i[s+4],l=i[s+1],u=i[s+3],c=i[s+5];e.moveTo(a,l),e.lineTo(o,u),e.lineTo(h,c)}e.fillStyle="#FF0000",e.fill(),e.closePath()},n.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),e.closePath()},n.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,n=i.length/2;this.count++;for(var s=1;n-2>s;s++){var a=2*s,o=i[a],h=i[a+2],l=i[a+4],u=i[a+1],c=i[a+3],d=i[a+5],p=r[a]*t.texture.width,f=r[a+2]*t.texture.width,m=r[a+4]*t.texture.width,v=r[a+1]*t.texture.height,g=r[a+3]*t.texture.height,x=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,c),e.lineTo(l,d),e.closePath(),e.clip();var b=p*g+v*m+f*x-g*m-v*f-p*x,T=o*g+v*l+h*x-g*l-v*h-o*x,y=p*h+o*m+f*l-h*m-o*f-p*l,_=p*g*l+v*h*m+o*f*x-o*g*m-v*f*l-p*h*x,w=u*g+v*d+c*x-g*d-v*c-u*x,R=p*c+u*m+f*d-c*m-u*f-p*d,A=p*g*d+v*c*m+u*f*x-u*g*m-v*f*d-p*c*x;e.transform(T/b,w/b,y/b,R/b,_/b,A/b),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},n.Strip=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=n.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},n.Strip.constructor=n.Strip,n.Strip.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},n.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Rope=function(t,e){n.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},n.Rope.constructor=n.Rope,n.Rope.prototype=Object.create(n.Strip.prototype),n.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,n=t[0],s=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var a=t.length,o=1;a>o;o++){var s=t[o],h=4*o,l=o/(a-1);o%2?(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1):(e[h]=l,e[h+1]=0,e[h+2]=l,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+1,n=s}}},n.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},a=t[0];this.count-=.2,i[0]=a.x+s.x,i[1]=a.y+s.y,i[2]=a.x-s.x,i[3]=a.y-s.y;for(var o=t.length,h=1;o>h;h++){var a=t[h],l=4*h;e=t.length-1>h?t[h+1]:a,s.y=-(e.x-r.x),s.x=e.y-r.y;var u=10*(1-h/(o-1));u>1&&(u=1);var c=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=c,s.y/=c,s.x*=d,s.y*=d,i[l]=a.x+s.x,i[l+1]=a.y+s.y,i[l+2]=a.x-s.x,i[l+3]=a.y-s.y,r=a}n.DisplayObjectContainer.prototype.updateTransform.call(this)}},n.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite=function(t,e,i){n.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new n.Point(1,1),this.tilePosition=new n.Point(0,0),this.blendMode=n.blendModes.NORMAL},n.TilingSprite.constructor=n.TilingSprite,n.TilingSprite.prototype=Object.create(n.DisplayObjectContainer.prototype),n.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},n.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},n.Spine=function(t){if(n.DisplayObjectContainer.call(this),this.spineData=n.AnimCache[t],!this.spineData)throw Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+t);this.count=0,this.sprites=[],this.skeleton=new o.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new o.AnimationStateData(this.spineData),this.state=new o.AnimationState(this.stateData);for(var e=0;this.skeleton.drawOrder.length>e;e++){var i=this.skeleton.drawOrder[e].data.attachmentName;n.TextureCache[i]||(i+=".png");var r=new n.Sprite(n.Texture.fromFrame(i));r.anchor.x=r.anchor.y=.5,this.addChild(r),this.sprites.push(r)}},n.Spine.constructor=n.Spine,n.Spine.prototype=Object.create(n.DisplayObjectContainer.prototype),n.Spine.prototype.updateTransform=function(){this.state.update(1/60),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var t=0;this.skeleton.drawOrder.length>t;t++){var e=this.skeleton.drawOrder[t],i=e.bone.worldX+e.attachment.x*e.bone.m00+e.attachment.y*e.bone.m01+.5*e.attachment.width,r=e.bone.worldY+e.attachment.x*e.bone.m10+e.attachment.y*e.bone.m11+.5*e.attachment.height;if(e.cacheName!=e.attachment.name){var s=e.attachment.name;n.TextureCache[s]||(s+=".png"),this.sprites[t].setTexture(n.TextureCache[s]),e.cacheName=e.attachment.name}i+=-(e.attachment.width*(e.bone.worldScaleX+e.attachment.scaleX-1)>>1),r+=-(e.attachment.height*(e.bone.worldScaleY+e.attachment.scaleY-1)>>1),this.sprites[t].position.x=i,this.sprites[t].position.y=r,this.sprites[t].rotation=-(e.bone.worldRotation+e.attachment.rotation)*(Math.PI/180)}n.DisplayObjectContainer.prototype.updateTransform.call(this)};var o={};o.BoneData=function(t,e){this.name=t,this.parent=e},o.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},o.SlotData=function(t,e){this.name=t,this.boneData=e},o.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},o.Bone=function(t,e){this.data=t,this.parent=e,this.setToSetupPose()},o.Bone.yDown=!1,o.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(t,e){var i=this.parent;null!=i?(this.worldX=this.x*i.m00+this.y*i.m01+i.worldX,this.worldY=this.x*i.m10+this.y*i.m11+i.worldY,this.worldScaleX=i.worldScaleX*this.scaleX,this.worldScaleY=i.worldScaleY*this.scaleY,this.worldRotation=i.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var r=this.worldRotation*Math.PI/180,n=Math.cos(r),s=Math.sin(r);this.m00=n*this.worldScaleX,this.m10=s*this.worldScaleX,this.m01=-s*this.worldScaleY,this.m11=n*this.worldScaleY,t&&(this.m00=-this.m00,this.m01=-this.m01),e&&(this.m10=-this.m10,this.m11=-this.m11),o.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var t=this.data;this.x=t.x,this.y=t.y,this.rotation=t.rotation,this.scaleX=t.scaleX,this.scaleY=t.scaleY}},o.Slot=function(t,e,i){this.data=t,this.skeleton=e,this.bone=i,this.setToSetupPose()},o.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(t){this.attachment=t,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(t){this._attachmentTime=this.skeleton.time-t},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var t=this.data;this.r=t.r,this.g=t.g,this.b=t.b,this.a=t.a;for(var e=this.skeleton.data.slots,i=0,r=e.length;r>i;i++)if(e[i]==t){this.setAttachment(t.attachmentName?this.skeleton.getAttachmentBySlotIndex(i,t.attachmentName):null);break}}},o.Skin=function(t){this.name=t,this.attachments={}},o.Skin.prototype={addAttachment:function(t,e,i){this.attachments[t+":"+e]=i},getAttachment:function(t,e){return this.attachments[t+":"+e]},_attachAll:function(t,e){for(var i in e.attachments){var r=i.indexOf(":"),n=parseInt(i.substring(0,r)),s=i.substring(r+1),a=t.slots[n];if(a.attachment&&a.attachment.name==s){var o=this.getAttachment(n,s);o&&a.setAttachment(o)}}}},o.Animation=function(t,e,i){this.name=t,this.timelines=e,this.duration=i},o.Animation.prototype={apply:function(t,e,i){i&&0!=this.duration&&(e%=this.duration);for(var r=this.timelines,n=0,s=r.length;s>n;n++)r[n].apply(t,e,1)},mix:function(t,e,i,r){i&&0!=this.duration&&(e%=this.duration);for(var n=this.timelines,s=0,a=n.length;a>s;s++)n[s].apply(t,e,r)}},o.binarySearch=function(t,e,i){var r=0,n=Math.floor(t.length/i)-2;if(0==n)return i;for(var s=n>>>1;;){if(e>=t[(s+1)*i]?r=s+1:n=s,r==n)return(r+1)*i;s=r+n>>>1}},o.linearSearch=function(t,e,i){for(var r=0,n=t.length-i;n>=r;r+=i)if(t[r]>e)return r;return-1},o.Curves=function(t){this.curves=[],this.curves.length=6*(t-1)},o.Curves.prototype={setLinear:function(t){this.curves[6*t]=0},setStepped:function(t){this.curves[6*t]=-1},setCurve:function(t,e,i,r,n){var s=.1,a=s*s,o=a*s,h=3*s,l=3*a,u=6*a,c=6*o,d=2*-e+r,p=2*-i+n,f=3*(e-r)+1,m=3*(i-n)+1,v=6*t,g=this.curves;g[v]=e*h+d*l+f*o,g[v+1]=i*h+p*l+m*o,g[v+2]=d*u+f*c,g[v+3]=p*u+m*c,g[v+4]=f*c,g[v+5]=m*c},getCurvePercent:function(t,e){e=0>e?0:e>1?1:e;var i=6*t,r=this.curves,n=r[i];if(!n)return e;if(-1==n)return 0;for(var s=r[i+1],a=r[i+2],o=r[i+3],h=r[i+4],l=r[i+5],u=n,c=s,d=8;;){if(u>=e){var p=u-n,f=c-s;return f+(c-f)*(e-p)/(u-p)}if(0==d)break;d--,n+=a,s+=o,a+=h,o+=l,u+=n,c+=s}return c+(1-c)*(e-u)/(1-u)}},o.RotateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=2*t},o.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){t*=2,this.frames[t]=e,this.frames[t+1]=i},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-2]){for(var s=n.data.rotation+r[r.length-1]-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;return n.rotation+=s*i,void 0}var a=o.binarySearch(r,e,2),h=r[a-1],l=r[a],u=1-(e-l)/(r[a-2]-l);u=this.curves.getCurvePercent(a/2-1,u);for(var s=r[a+1]-h;s>180;)s-=360;for(;-180>s;)s+=360;for(s=n.data.rotation+(h+s*u)-n.rotation;s>180;)s-=360;for(;-180>s;)s+=360;n.rotation+=s*i}}},o.TranslateTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.x+=(n.data.x+r[r.length-2]-n.x)*i,n.y+=(n.data.y+r[r.length-1]-n.y)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.x+=(n.data.x+a+(r[s+1]-a)*u-n.x)*i,n.y+=(n.data.y+h+(r[s+2]-h)*u-n.y)*i}}},o.ScaleTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=3*t},o.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(t,e,i,r){t*=3,this.frames[t]=e,this.frames[t+1]=i,this.frames[t+2]=r},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.bones[this.boneIndex];if(e>=r[r.length-3])return n.scaleX+=(n.data.scaleX-1+r[r.length-2]-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+r[r.length-1]-n.scaleY)*i,void 0;var s=o.binarySearch(r,e,3),a=r[s-2],h=r[s-1],l=r[s],u=1-(e-l)/(r[s+-3]-l);u=this.curves.getCurvePercent(s/3-1,u),n.scaleX+=(n.data.scaleX-1+a+(r[s+1]-a)*u-n.scaleX)*i,n.scaleY+=(n.data.scaleY-1+h+(r[s+2]-h)*u-n.scaleY)*i}}},o.ColorTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=5*t},o.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e){t*=5,this.frames[t]=e,this.frames[t+1]=r,this.frames[t+2]=g,this.frames[t+3]=b,this.frames[t+4]=a},apply:function(t,e,i){var r=this.frames;if(!(r[0]>e)){var n=t.slots[this.slotIndex];if(e>=r[r.length-5]){var s=r.length-1;return n.r=r[s-3],n.g=r[s-2],n.b=r[s-1],n.a=r[s],void 0}var a=o.binarySearch(r,e,5),h=r[a-4],l=r[a-3],u=r[a-2],c=r[a-1],d=r[a],p=1-(e-d)/(r[a-5]-d);p=this.curves.getCurvePercent(a/5-1,p);var f=h+(r[a+1]-h)*p,m=l+(r[a+2]-l)*p,v=u+(r[a+3]-u)*p,g=c+(r[a+4]-c)*p;1>i?(n.r+=(f-n.r)*i,n.g+=(m-n.g)*i,n.b+=(v-n.b)*i,n.a+=(g-n.a)*i):(n.r=f,n.g=m,n.b=v,n.a=g)}}},o.AttachmentTimeline=function(t){this.curves=new o.Curves(t),this.frames=[],this.frames.length=t,this.attachmentNames=[],this.attachmentNames.length=t},o.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(t,e,i){this.frames[t]=e,this.attachmentNames[t]=i},apply:function(t,e){var i=this.frames;if(!(i[0]>e)){var r;r=e>=i[i.length-1]?i.length-1:o.binarySearch(i,e,1)-1;var n=this.attachmentNames[r];t.slots[this.slotIndex].setAttachment(n?t.getAttachmentBySlotIndex(this.slotIndex,n):null)}}},o.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},o.SkeletonData.prototype={defaultSkin:null,findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return slot[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].name==t)return i;return-1},findSkin:function(t){for(var e=this.skins,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},findAnimation:function(t){for(var e=this.animations,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null}},o.Skeleton=function(t){this.data=t,this.bones=[];for(var e=0,i=t.bones.length;i>e;e++){var r=t.bones[e],n=r.parent?this.bones[t.bones.indexOf(r.parent)]:null;this.bones.push(new o.Bone(r,n))}this.slots=[],this.drawOrder=[];for(var e=0,i=t.slots.length;i>e;e++){var s=t.slots[e],a=this.bones[t.bones.indexOf(s.boneData)],h=new o.Slot(s,this,a);this.slots.push(h),this.drawOrder.push(h)}},o.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var t=this.flipX,e=this.flipY,i=this.bones,r=0,n=i.length;n>r;r++)i[r].updateWorldTransform(t,e)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var t=this.bones,e=0,i=t.length;i>e;e++)t[e].setToSetupPose()},setSlotsToSetupPose:function(){for(var t=this.slots,e=0,i=t.length;i>e;e++)t[e].setToSetupPose(e)},getRootBone:function(){return 0==this.bones.length?null:this.bones[0]},findBone:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findBoneIndex:function(t){for(var e=this.bones,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},findSlot:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return e[i];return null},findSlotIndex:function(t){for(var e=this.slots,i=0,r=e.length;r>i;i++)if(e[i].data.name==t)return i;return-1},setSkinByName:function(t){var e=this.data.findSkin(t);if(!e)throw"Skin not found: "+t;this.setSkin(e)},setSkin:function(t){this.skin&&t&&t._attachAll(this,this.skin),this.skin=t},getAttachmentBySlotName:function(t,e){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(t),e)},getAttachmentBySlotIndex:function(t,e){if(this.skin){var i=this.skin.getAttachment(t,e);if(i)return i}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(t,e):null},setAttachment:function(t,e){for(var i=this.slots,r=0,n=i.size;n>r;r++){var s=i[r];if(s.data.name==t){var a=null;if(e&&(a=this.getAttachment(r,e),null==a))throw"Attachment not found: "+e+", for slot: "+t;return s.setAttachment(a),void 0}}throw"Slot not found: "+t},update:function(t){time+=t}},o.AttachmentType={region:0},o.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},o.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(t,e,i,r,n){var s=this.uvs;n?(s[2]=t,s[3]=r,s[4]=t,s[5]=e,s[6]=i,s[7]=e,s[0]=i,s[1]=r):(s[0]=t,s[1]=r,s[2]=t,s[3]=e,s[4]=i,s[5]=e,s[6]=i,s[7]=r)},updateOffset:function(){var t=this.width/this.regionOriginalWidth*this.scaleX,e=this.height/this.regionOriginalHeight*this.scaleY,i=-this.width/2*this.scaleX+this.regionOffsetX*t,r=-this.height/2*this.scaleY+this.regionOffsetY*e,n=i+this.regionWidth*t,s=r+this.regionHeight*e,a=this.rotation*Math.PI/180,o=Math.cos(a),h=Math.sin(a),l=i*o+this.x,u=i*h,c=r*o+this.y,d=r*h,p=n*o+this.x,f=n*h,m=s*o+this.y,v=s*h,g=this.offset;g[0]=l-d,g[1]=c+u,g[2]=l-v,g[3]=m+u,g[4]=p-v,g[5]=m+f,g[6]=p-d,g[7]=c+f},computeVertices:function(t,e,i,r){t+=i.worldX,e+=i.worldY;var n=i.m00,s=i.m01,a=i.m10,o=i.m11,h=this.offset;r[0]=h[0]*n+h[1]*s+t,r[1]=h[0]*a+h[1]*o+e,r[2]=h[2]*n+h[3]*s+t,r[3]=h[2]*a+h[3]*o+e,r[4]=h[4]*n+h[5]*s+t,r[5]=h[4]*a+h[5]*o+e,r[6]=h[6]*n+h[7]*s+t,r[7]=h[6]*a+h[7]*o+e}},o.AnimationStateData=function(t){this.skeletonData=t,this.animationToMixTime={}},o.AnimationStateData.prototype={setMixByName:function(t,e,i){var r=this.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;var n=this.skeletonData.findAnimation(e);if(!n)throw"Animation not found: "+e;this.setMix(r,n,i)},setMix:function(t,e,i){this.animationToMixTime[t.name+":"+e.name]=i},getMix:function(t,e){var i=this.animationToMixTime[t.name+":"+e.name];return i?i:0}},o.AnimationState=function(t){this.data=t,this.queue=[]},o.AnimationState.prototype={current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(t){if(this.currentTime+=t,this.previousTime+=t,this.mixTime+=t,this.queue.length>0){var e=this.queue[0];this.currentTime>=e.delay&&(this._setAnimation(e.animation,e.loop),this.queue.shift()) +}},apply:function(t){if(this.current)if(this.previous){this.previous.apply(t,this.previousTime,this.previousLoop);var e=this.mixTime/this.mixDuration;e>=1&&(e=1,this.previous=null),this.current.mix(t,this.currentTime,this.currentLoop,e)}else this.current.apply(t,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(t,e){this.previous=null,t&&this.current&&(this.mixDuration=this.data.getMix(this.current,t),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=t,this.currentLoop=e,this.currentTime=0},setAnimationByName:function(t,e){var i=this.data.skeletonData.findAnimation(t);if(!i)throw"Animation not found: "+t;this.setAnimation(i,e)},setAnimation:function(t,e){this.queue.length=0,this._setAnimation(t,e)},addAnimationByName:function(t,e,i){var r=this.data.skeletonData.findAnimation(t);if(!r)throw"Animation not found: "+t;this.addAnimation(r,e,i)},addAnimation:function(t,e,i){var r={};if(r.animation=t,r.loop=e,!i||0>=i){var n=0==this.queue.length?this.current:this.queue[this.queue.length-1].animation;i=null!=n?n.duration-this.data.getMix(n,t)+(i||0):0}r.delay=i,this.queue.push(r)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},o.SkeletonJson=function(t){this.attachmentLoader=t},o.SkeletonJson.prototype={scale:1,readSkeletonData:function(t){for(var e=new o.SkeletonData,i=t.bones,r=0,n=i.length;n>r;r++){var s=i[r],a=null;if(s.parent&&(a=e.findBone(s.parent),!a))throw"Parent bone not found: "+s.parent;var h=new o.BoneData(s.name,a);h.length=(s.length||0)*this.scale,h.x=(s.x||0)*this.scale,h.y=(s.y||0)*this.scale,h.rotation=s.rotation||0,h.scaleX=s.scaleX||1,h.scaleY=s.scaleY||1,e.bones.push(h)}for(var l=t.slots,r=0,n=l.length;n>r;r++){var u=l[r],h=e.findBone(u.bone);if(!h)throw"Slot bone not found: "+u.bone;var c=new o.SlotData(u.name,h),d=u.color;d&&(c.r=o.SkeletonJson.toColor(d,0),c.g=o.SkeletonJson.toColor(d,1),c.b=o.SkeletonJson.toColor(d,2),c.a=o.SkeletonJson.toColor(d,3)),c.attachmentName=u.attachment,e.slots.push(c)}var p=t.skins;for(var f in p)if(p.hasOwnProperty(f)){var m=p[f],v=new o.Skin(f);for(var g in m)if(m.hasOwnProperty(g)){var x=e.findSlotIndex(g),b=m[g];for(var T in b)if(b.hasOwnProperty(T)){var y=this.readAttachment(v,T,b[T]);null!=y&&v.addAttachment(x,T,y)}}e.skins.push(v),"default"==v.name&&(e.defaultSkin=v)}var _=t.animations;for(var w in _)_.hasOwnProperty(w)&&this.readAnimation(w,_[w],e);return e},readAttachment:function(t,e,i){e=i.name||e;var r=o.AttachmentType[i.type||"region"],n=new o.RegionAttachment;return n.name=e,r==o.AttachmentType.region&&(n.x=(i.x||0)*this.scale,n.y=(i.y||0)*this.scale,n.scaleX=i.scaleX||1,n.scaleY=i.scaleY||1,n.rotation=i.rotation||0,n.width=(i.width||32)*this.scale,n.height=(i.height||32)*this.scale,n.updateOffset()),n},readAnimation:function(t,e,i){var r=[],n=0,s=e.bones;for(var a in s)if(s.hasOwnProperty(a)){var h=i.findBoneIndex(a);if(-1==h)throw"Bone not found: "+a;var l=s[a];for(var u in l)if(l.hasOwnProperty(u)){var c=l[u];if("rotate"==u){var d=new o.RotateTimeline(c.length);d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p,v.time,v.angle),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[2*d.getFrameCount()-2])}else{if("translate"!=u&&"scale"!=u)throw"Invalid timeline type for a bone: "+u+" ("+a+")";var d,g=1;"scale"==u?d=new o.ScaleTimeline(c.length):(d=new o.TranslateTimeline(c.length),g=this.scale),d.boneIndex=h;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],x=(v.x||0)*g,b=(v.y||0)*g;d.setFrame(p,v.time,x,b),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[3*d.getFrameCount()-3])}}}var T=e.slots;for(var y in T)if(T.hasOwnProperty(y)){var _=T[y],w=i.findSlotIndex(y);for(var u in _)if(_.hasOwnProperty(u)){var c=_[u];if("color"==u){var d=new o.ColorTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f],R=v.color,A=o.SkeletonJson.toColor(R,0),S=o.SkeletonJson.toColor(R,1),L=o.SkeletonJson.toColor(R,2),C=o.SkeletonJson.toColor(R,3);d.setFrame(p,v.time,A,S,L,C),o.SkeletonJson.readCurve(d,p,v),p++}r.push(d),n=Math.max(n,d.frames[5*d.getFrameCount()-5])}else{if("attachment"!=u)throw"Invalid timeline type for a slot: "+u+" ("+y+")";var d=new o.AttachmentTimeline(c.length);d.slotIndex=w;for(var p=0,f=0,m=c.length;m>f;f++){var v=c[f];d.setFrame(p++,v.time,v.name)}r.push(d),n=Math.max(n,d.frames[Math.floor(d.getFrameCount())-1])}}}i.animations.push(new o.Animation(t,r,n))}},o.SkeletonJson.readCurve=function(t,e,i){var r=i.curve;r&&("stepped"==r?t.curves.setStepped(e):r instanceof Array&&t.curves.setCurve(e,r[0],r[1],r[2],r[3]))},o.SkeletonJson.toColor=function(t,e){if(8!=t.length)throw"Color hexidecimal length must be 8, recieved: "+t;return parseInt(t.substring(2*e,2),16)/255},o.Atlas=function(t,e){this.textureLoader=e,this.pages=[],this.regions=[];var i=new o.AtlasReader(t),r=[];r.length=4;for(var n=null;;){var s=i.readLine();if(null==s)break;if(s=i.trim(s),0==s.length)n=null;else if(n){var a=new o.AtlasRegion;a.name=s,a.page=n,a.rotate="true"==i.readValue(),i.readTuple(r);var h=parseInt(r[0]),l=parseInt(r[1]);i.readTuple(r);var u=parseInt(r[0]),c=parseInt(r[1]);a.u=h/n.width,a.v=l/n.height,a.rotate?(a.u2=(h+c)/n.width,a.v2=(l+u)/n.height):(a.u2=(h+u)/n.width,a.v2=(l+c)/n.height),a.x=h,a.y=l,a.width=Math.abs(u),a.height=Math.abs(c),4==i.readTuple(r)&&(a.splits=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],4==i.readTuple(r)&&(a.pads=[parseInt(r[0]),parseInt(r[1]),parseInt(r[2]),parseInt(r[3])],i.readTuple(r))),a.originalWidth=parseInt(r[0]),a.originalHeight=parseInt(r[1]),i.readTuple(r),a.offsetX=parseInt(r[0]),a.offsetY=parseInt(r[1]),a.index=parseInt(i.readValue()),this.regions.push(a)}else{n=new o.AtlasPage,n.name=s,n.format=o.Atlas.Format[i.readValue()],i.readTuple(r),n.minFilter=o.Atlas.TextureFilter[r[0]],n.magFilter=o.Atlas.TextureFilter[r[1]];var d=i.readValue();n.uWrap=o.Atlas.TextureWrap.clampToEdge,n.vWrap=o.Atlas.TextureWrap.clampToEdge,"x"==d?n.uWrap=o.Atlas.TextureWrap.repeat:"y"==d?n.vWrap=o.Atlas.TextureWrap.repeat:"xy"==d&&(n.uWrap=n.vWrap=o.Atlas.TextureWrap.repeat),e.load(n,s),this.pages.push(n)}}},o.Atlas.prototype={findRegion:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++)if(e[i].name==t)return e[i];return null},dispose:function(){for(var t=this.pages,e=0,i=t.length;i>e;e++)this.textureLoader.unload(t[e].rendererObject)},updateUVs:function(t){for(var e=this.regions,i=0,r=e.length;r>i;i++){var n=e[i];n.page==t&&(n.u=n.x/t.width,n.v=n.y/t.height,n.rotate?(n.u2=(n.x+n.height)/t.width,n.v2=(n.y+n.width)/t.height):(n.u2=(n.x+n.width)/t.width,n.v2=(n.y+n.height)/t.height))}}},o.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},o.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},o.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},o.AtlasPage=function(){},o.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},o.AtlasRegion=function(){},o.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},o.AtlasReader=function(t){this.lines=t.split(/\r\n|\r|\n/)},o.AtlasReader.prototype={index:0,trim:function(t){return t.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var t=this.readLine(),e=t.indexOf(":");if(-1==e)throw"Invalid line: "+t;return this.trim(t.substring(e+1))},readTuple:function(t){var e=this.readLine(),i=e.indexOf(":");if(-1==i)throw"Invalid line: "+e;for(var r=0,n=i+1;3>r;r++){var s=e.indexOf(",",n);if(-1==s){if(0==r)throw"Invalid line: "+e;break}t[r]=this.trim(e.substr(n,s-n)),n=s+1}return t[r]=this.trim(e.substring(n)),r+1}},o.AtlasAttachmentLoader=function(t){this.atlas=t},o.AtlasAttachmentLoader.prototype={newAttachment:function(t,e,i){switch(e){case o.AttachmentType.region:var r=this.atlas.findRegion(i);if(!r)throw"Region not found in atlas: "+i+" ("+e+")";var n=new o.RegionAttachment(i);return n.rendererObject=r,n.setUVs(r.u,r.v,r.u2,r.v2,r.rotate),n.regionOffsetX=r.offsetX,n.regionOffsetY=r.offsetY,n.regionWidth=r.width,n.regionHeight=r.height,n.regionOriginalWidth=r.originalWidth,n.regionOriginalHeight=r.originalHeight,n}throw"Unknown attachment type: "+e}},n.AnimCache={},o.Bone.yDown=!0,n.CustomRenderable=function(){n.DisplayObject.call(this)},n.CustomRenderable.constructor=n.CustomRenderable,n.CustomRenderable.prototype=Object.create(n.DisplayObject.prototype),n.CustomRenderable.prototype.renderCanvas=function(){},n.CustomRenderable.prototype.initWebGL=function(){},n.CustomRenderable.prototype.renderWebGL=function(){},n.BaseTextureCache={},n.texturesToUpdate=[],n.texturesToDestroy=[],n.BaseTexture=function(t){if(n.EventTarget.call(this),this.width=100,this.height=100,this.source=t,t){if(this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,n.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,n.texturesToUpdate.push(this);this._powerOf2=!1}},n.BaseTexture.constructor=n.BaseTexture,n.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,n.texturesToDestroy.push(this)},n.BaseTexture.fromImage=function(t,e){var i=n.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new n.BaseTexture(r),n.BaseTextureCache[t]=i}return i},n.TextureCache={},n.FrameCache={},n.Texture=function(t,e){if(n.EventTarget.call(this),e||(this.noFrame=!0,e=new n.Rectangle(0,0,1,1)),this.trim=new n.Point,t instanceof n.Texture&&(t=t.baseTexture),this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new n.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},n.Texture.constructor=n.Texture,n.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new n.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},n.Texture.prototype.destroy=function(t){t&&this.baseTexture.destroy()},n.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.updateFrame=!0,n.Texture.frameUpdates.push(this)},n.Texture.fromImage=function(t,e){var i=n.TextureCache[t];return i||(i=new n.Texture(n.BaseTexture.fromImage(t,e)),n.TextureCache[t]=i),i},n.Texture.fromFrame=function(t){var e=n.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},n.Texture.fromCanvas=function(t){var e=new n.BaseTexture(t);return new n.Texture(e)},n.Texture.addTextureToCache=function(t,e){n.TextureCache[e]=t},n.Texture.removeTextureFromCache=function(t){var e=n.TextureCache[t];return n.TextureCache[t]=null,e},n.Texture.frameUpdates=[],n.RenderTexture=function(t,e){n.EventTarget.call(this),this.width=t||100,this.height=e||100,this.indetityMatrix=n.mat3.create(),this.frame=new n.Rectangle(0,0,this.width,this.height),n.gl?this.initWebGL():this.initCanvas()},n.RenderTexture.constructor=n.RenderTexture,n.RenderTexture.prototype=Object.create(n.Texture.prototype),n.RenderTexture.prototype.initWebGL=function(){var t=n.gl;this.glFramebuffer=t.createFramebuffer(),t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),this.glFramebuffer.width=this.width,this.glFramebuffer.height=this.height,this.baseTexture=new n.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTexture=t.createTexture(),t.bindTexture(t.TEXTURE_2D,this.baseTexture._glTexture),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width,this.height,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),this.baseTexture.isRender=!0,t.bindFramebuffer(t.FRAMEBUFFER,this.glFramebuffer),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.baseTexture._glTexture,0),this.projectionMatrix=n.mat4.create(),this.projectionMatrix[5]=2/this.height,this.projectionMatrix[13]=-1,this.projectionMatrix[0]=2/this.width,this.projectionMatrix[12]=-1,this.render=this.renderWebGL},n.RenderTexture.prototype.initCanvas=function(){this.renderer=new n.CanvasRenderer(this.width,this.height,null,0),this.baseTexture=new n.BaseTexture(this.renderer.view),this.frame=new n.Rectangle(0,0,this.width,this.height),this.render=this.renderCanvas},n.RenderTexture.prototype.renderWebGL=function(t,e){var i=n.gl;i.colorMask(!0,!0,!0,!0),i.viewport(0,0,this.width,this.height),i.bindFramebuffer(i.FRAMEBUFFER,this.glFramebuffer),e&&(i.clearColor(0,0,0,0),i.clear(i.COLOR_BUFFER_BIT));var r=t.children;t.worldTransform=n.mat3.create();for(var s=0,a=r.length;a>s;s++)r[s].updateTransform();var o=t.__renderGroup;o?t==o.root?o.render(this.projectionMatrix):o.renderSpecific(t,this.projectionMatrix):(this.renderGroup||(this.renderGroup=new n.WebGLRenderGroup(i)),this.renderGroup.setRenderable(t),this.renderGroup.render(this.projectionMatrix))},n.RenderTexture.prototype.renderCanvas=function(t,e){var i=t.children;t.worldTransform=n.mat3.create();for(var r=0,s=i.length;s>r;r++)i[r].updateTransform();e&&this.renderer.context.clearRect(0,0,this.width,this.height),this.renderer.renderDisplayObject(t),n.texturesToUpdate.push(this.baseTexture)},n.AssetLoader=function(t){n.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:n.ImageLoader,jpeg:n.ImageLoader,png:n.ImageLoader,gif:n.ImageLoader,json:n.JsonLoader,anim:n.SpineLoader,xml:n.BitmapFontLoader,fnt:n.BitmapFontLoader}},n.AssetLoader.constructor=n.AssetLoader,n.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),n=this.loadersByType[r];if(!n)throw Error(r+" is an unsupported file type");var s=new n(i,this.crossorigin);s.addEventListener("loaded",function(){t.onAssetLoaded()}),s.load()}},n.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())},n.JsonLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.crossorigin=e,this.loaded=!1},n.JsonLoader.constructor=n.JsonLoader,n.JsonLoader.prototype.load=function(){this.ajaxRequest=new s;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},n.JsonLoader.prototype.onJSONLoaded=function(){if(4==this.ajaxRequest.readyState)if(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))if(this.json=JSON.parse(this.ajaxRequest.responseText),this.json.frames){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()}else if(this.json.bones){var h=new o.SkeletonJson,l=h.readSkeletonData(this.json);n.AnimCache[this.url]=l,this.onLoaded()}else this.onLoaded();else this.onError()},n.JsonLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},n.JsonLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},n.SpriteSheetLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},n.SpriteSheetLoader.constructor=n.SpriteSheetLoader,n.SpriteSheetLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpriteSheetLoader.prototype.onJSONLoaded=function(){var t=this,e=this.baseUrl+this.json.meta.image,i=new n.ImageLoader(e,this.crossorigin),r=this.json.frames;this.texture=i.texture.baseTexture,i.addEventListener("loaded",function(){t.onLoaded()});for(var s in r){var a=r[s].frame;a&&(n.TextureCache[s]=new n.Texture(this.texture,{x:a.x,y:a.y,width:a.w,height:a.h}),r[s].trimmed&&(n.TextureCache[s].realSize=r[s].spriteSourceSize,n.TextureCache[s].trim.x=0))}i.load()},n.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.ImageLoader=function(t,e){n.EventTarget.call(this),this.texture=n.Texture.fromImage(t,e)},n.ImageLoader.constructor=n.ImageLoader,n.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},n.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.BitmapFontLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},n.BitmapFontLoader.constructor=n.BitmapFontLoader,n.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},n.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new n.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var a=this.ajaxRequest.responseXML.getElementsByTagName("char"),o=0;a.length>o;o++){var h=parseInt(a[o].attributes.getNamedItem("id").nodeValue,10),l={x:parseInt(a[o].attributes.getNamedItem("x").nodeValue,10),y:parseInt(a[o].attributes.getNamedItem("y").nodeValue,10),width:parseInt(a[o].attributes.getNamedItem("width").nodeValue,10),height:parseInt(a[o].attributes.getNamedItem("height").nodeValue,10)};n.TextureCache[h]=new n.Texture(this.texture,l),i.chars[h]={xOffset:parseInt(a[o].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(a[o].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(a[o].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{},texture:new n.Texture(this.texture,l)}}var u=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(o=0;u.length>o;o++){var c=parseInt(u[o].attributes.getNamedItem("first").nodeValue,10),d=parseInt(u[o].attributes.getNamedItem("second").nodeValue,10),p=parseInt(u[o].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[c]=p}n.BitmapText.fonts[i.font]=i;var f=this;e.addEventListener("loaded",function(){f.onLoaded()}),e.load()}},n.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},n.SpineLoader=function(t,e){n.EventTarget.call(this),this.url=t,this.crossorigin=e,this.loaded=!1},n.SpineLoader.constructor=n.SpineLoader,n.SpineLoader.prototype.load=function(){new n.JsonLoader(this.url,this.crossorigin),jsonLoader.addEventListener("loaded",function(t){scope.json=t.content.json,scope.onJSONLoaded()}),jsonLoader.load()},n.SpineLoader.prototype.load=function(){var t=this,e=new n.JsonLoader(this.url,this.crossorigin);e.addEventListener("loaded",function(e){t.json=e.content.json,t.onJSONLoaded()}),e.load()},n.SpineLoader.prototype.onJSONLoaded=function(){var t=new o.SkeletonJson,e=t.readSkeletonData(this.json);n.AnimCache[this.url]=e,this.onLoaded()},n.SpineLoader.prototype.onLoaded=function(){this.loaded=!0,this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.PIXI=n):i.PIXI=n}).call(this); \ No newline at end of file diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 11 - RenderTexture/pixi.js b/examples/example 11 - RenderTexture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 11 - RenderTexture/pixi.js +++ b/examples/example 11 - RenderTexture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 12 - Spine/data/dragonBonesData.json b/examples/example 12 - Spine/data/dragonBonesData.json new file mode 100644 index 0000000..ba7ae5f --- /dev/null +++ b/examples/example 12 - Spine/data/dragonBonesData.json @@ -0,0 +1,779 @@ +{ +"bones": [ + { "name": "root", "y": -176.12 }, + { "name": "COG", "parent": "root", "y": 176.12 }, + { "name": "back", "parent": "COG", "length": 115.37, "x": 16.03, "y": 27.94, "rotation": 151.83 }, + { "name": "chest", "parent": "COG", "length": 31.24, "x": 52.52, "y": 15.34, "rotation": 161.7 }, + { "name": "neck", "parent": "COG", "length": 41.36, "x": 64.75, "y": 11.98, "rotation": 39.05 }, + { "name": "L_front_thigh", "parent": "chest", "length": 67.42, "x": -45.58, "y": 7.92, "rotation": 138.94 }, + { "name": "L_wing", "parent": "chest", "length": 301.12, "x": -7.24, "y": -24.65, "rotation": -75.51 }, + { "name": "R_front_thigh", "parent": "chest", "length": 81.63, "x": -10.89, "y": 28.25, "rotation": 67.96 }, + { "name": "R_rear_thigh", "parent": "back", "length": 123.46, "x": 65.31, "y": 59.89, "rotation": 104.87 }, + { "name": "chin", "parent": "neck", "length": 153.15, "x": 64.62, "y": -6.99, "rotation": -69.07 }, + { "name": "head", "parent": "neck", "length": 188.83, "x": 69.96, "y": 2.49, "rotation": 8.06 }, + { "name": "tail1", "parent": "back", "length": 65.65, "x": 115.37, "y": -0.19, "rotation": 44.31 }, + { "name": "L_front_leg", "parent": "L_front_thigh", "length": 51.57, "x": 67.42, "y": 0.02, "rotation": 43.36 }, + { "name": "L_rear_thigh", "parent": "R_rear_thigh", "length": 88.05, "x": -8.59, "y": 30.18, "rotation": 28.35 }, + { "name": "R_front_leg", "parent": "R_front_thigh", "length": 66.52, "x": 83.04, "y": -0.3, "rotation": 92.7 }, + { "name": "R_rear_leg", "parent": "R_rear_thigh", "length": 91.06, "x": 123.46, "y": -0.26, "rotation": -129.04 }, + { "name": "R_wing", "parent": "head", "length": 359.5, "x": -74.68, "y": 20.9, "rotation": 83.21 }, + { "name": "tail2", "parent": "tail1", "length": 54.5, "x": 65.65, "y": 0.22, "rotation": 12 }, + { "name": "L_front_toe1", "parent": "L_front_leg", "length": 51.44, "x": 45.53, "y": 2.43, "rotation": -98 }, + { "name": "L_front_toe2", "parent": "L_front_leg", "length": 61.97, "x": 51.57, "y": -0.12, "rotation": -55.26 }, + { "name": "L_front_toe3", "parent": "L_front_leg", "length": 45.65, "x": 54.19, "y": 0.6, "scaleX": 1.134, "rotation": -11.13 }, + { "name": "L_front_toe4", "parent": "L_front_leg", "length": 53.47, "x": 50.6, "y": 7.08, "scaleX": 1.134, "rotation": 19.42 }, + { "name": "L_rear_leg", "parent": "L_rear_thigh", "length": 103.74, "x": 96.04, "y": -0.97, "rotation": -122.41 }, + { "name": "R_front_toe1", "parent": "R_front_leg", "length": 46.65, "x": 70.03, "y": 5.31, "rotation": 8.59 }, + { "name": "R_front_toe2", "parent": "R_front_leg", "length": 53.66, "x": 66.52, "y": 0.33, "rotation": -35.02 }, + { "name": "R_front_toe3", "parent": "R_front_leg", "length": 58.38, "x": 62.1, "y": -0.79, "rotation": -74.67 }, + { "name": "R_rear_toe1", "parent": "R_rear_leg", "length": 94.99, "x": 90.06, "y": 2.12, "rotation": 141.98 }, + { "name": "R_rear_toe2", "parent": "R_rear_leg", "length": 99.29, "x": 89.6, "y": 1.52, "rotation": 125.32 }, + { "name": "R_rear_toe3", "parent": "R_rear_leg", "length": 103.45, "x": 91.06, "y": -0.35, "rotation": 112.26 }, + { "name": "tail3", "parent": "tail2", "length": 41.78, "x": 54.5, "y": 0.37, "rotation": 1.8 }, + { "name": "tail4", "parent": "tail3", "length": 34.19, "x": 41.78, "y": 0.16, "rotation": -1.8 }, + { "name": "tail5", "parent": "tail4", "length": 32.32, "x": 34.19, "y": -0.19, "rotation": -3.15 }, + { "name": "tail6", "parent": "tail5", "length": 80.08, "x": 32.32, "y": -0.23, "rotation": -29.55 } +], +"slots": [ + { "name": "L_rear_leg", "bone": "L_rear_leg", "attachment": "L_rear_leg" }, + { "name": "L_rear_thigh", "bone": "L_rear_thigh", "attachment": "L_rear_thigh" }, + { "name": "L_wing", "bone": "L_wing", "attachment": "L_wing01" }, + { "name": "tail6", "bone": "tail6", "attachment": "tail06" }, + { "name": "tail5", "bone": "tail5", "attachment": "tail05" }, + { "name": "tail4", "bone": "tail4", "attachment": "tail04" }, + { "name": "tail3", "bone": "tail3", "attachment": "tail03" }, + { "name": "tail2", "bone": "tail2", "attachment": "tail02" }, + { "name": "tail1", "bone": "tail1", "attachment": "tail01" }, + { "name": "back", "bone": "back", "attachment": "back" }, + { "name": "L_front_thigh", "bone": "L_front_thigh", "attachment": "L_front_thigh" }, + { "name": "L_front_leg", "bone": "L_front_leg", "attachment": "L_front_leg" }, + { "name": "L_front_toe1", "bone": "L_front_toe1", "attachment": "front_toeA" }, + { "name": "L_front_toe4", "bone": "L_front_toe4", "attachment": "front_toeB" }, + { "name": "L_front_toe3", "bone": "L_front_toe3", "attachment": "front_toeB" }, + { "name": "L_front_toe2", "bone": "L_front_toe2", "attachment": "front_toeB" }, + { "name": "chest", "bone": "chest", "attachment": "chest" }, + { "name": "R_rear_toe1", "bone": "R_rear_toe1", "attachment": "rear-toe" }, + { "name": "R_rear_toe2", "bone": "R_rear_toe2", "attachment": "rear-toe" }, + { "name": "R_rear_toe3", "bone": "R_rear_toe3", "attachment": "rear-toe" }, + { "name": "R_rear_leg", "bone": "R_rear_leg", "attachment": "R_rear_leg" }, + { "name": "R_rear_thigh", "bone": "R_rear_thigh", "attachment": "R_rear_thigh" }, + { "name": "R_front_toe1", "bone": "R_front_toe1", "attachment": "front_toeB" }, + { "name": "R_front_thigh", "bone": "R_front_thigh", "attachment": "R_front_thigh" }, + { "name": "R_front_leg", "bone": "R_front_leg", "attachment": "R_front_leg" }, + { "name": "R_front_toe2", "bone": "R_front_toe2", "attachment": "front_toeB" }, + { "name": "R_front_toe3", "bone": "R_front_toe3", "attachment": "front_toeB" }, + { "name": "chin", "bone": "chin", "attachment": "chin" }, + { "name": "R_wing", "bone": "R_wing", "attachment": "R_wing01" }, + { "name": "head", "bone": "head", "attachment": "head" } +], +"skins": { + "default": { + "L_front_leg": { + "L_front_leg": { "x": 14.68, "y": 0.48, "rotation": 15.99, "width": 84, "height": 57 } + }, + "L_front_thigh": { + "L_front_thigh": { "x": 27.66, "y": -11.58, "rotation": 58.66, "width": 84, "height": 72 } + }, + "L_front_toe1": { + "front_toeA": { "x": 31.92, "y": 0.61, "rotation": 109.55, "width": 29, "height": 50 } + }, + "L_front_toe2": { + "front_toeB": { "x": 26.83, "y": -4.94, "rotation": 109.51, "width": 56, "height": 57 } + }, + "L_front_toe3": { + "front_toeB": { "x": 18.21, "y": -7.21, "scaleX": 0.881, "scaleY": 0.94, "rotation": 99.71, "width": 56, "height": 57 } + }, + "L_front_toe4": { + "front_toeB": { "x": 23.21, "y": -11.68, "scaleX": 0.881, "rotation": 79.89, "width": 56, "height": 57 } + }, + "L_rear_leg": { + "L_rear_leg": { "x": 67.29, "y": 12.62, "rotation": -162.65, "width": 206, "height": 177 } + }, + "L_rear_thigh": { + "L_rear_thigh": { "x": 56.03, "y": 27.38, "rotation": 74.93, "width": 91, "height": 149 } + }, + "L_wing": { + "L_wing01": { "x": 129.21, "y": -45.49, "rotation": -83.7, "width": 191, "height": 256 }, + "L_wing02": { "x": 126.37, "y": -31.69, "rotation": -86.18, "width": 179, "height": 269 }, + "L_wing03": { "x": 110.26, "y": -90.89, "rotation": -86.18, "width": 186, "height": 207 }, + "L_wing04": { "x": -61.61, "y": -83.26, "rotation": -86.18, "width": 188, "height": 135 }, + "L_wing05": { "x": -90.01, "y": -78.14, "rotation": -86.18, "width": 218, "height": 213 }, + "L_wing06": { "x": -143.76, "y": -83.71, "rotation": -86.18, "width": 192, "height": 331 }, + "L_wing07": { "x": -133.04, "y": -33.89, "rotation": -86.18, "width": 159, "height": 255 }, + "L_wing08": { "x": 50.15, "y": -15.71, "rotation": -86.18, "width": 164, "height": 181 }, + "L_wing09": { "x": 85.94, "y": -11.32, "rotation": -86.18, "width": 204, "height": 167 } + }, + "R_front_leg": { + "R_front_leg": { "x": 17.79, "y": 4.22, "rotation": 37.62, "width": 101, "height": 89 } + }, + "R_front_thigh": { + "R_front_thigh": { "x": 35.28, "y": 2.11, "rotation": 130.33, "width": 108, "height": 108 } + }, + "R_front_toe1": { + "front_toeB": { "x": 24.49, "y": -2.61, "rotation": 104.18, "width": 56, "height": 57 } + }, + "R_front_toe2": { + "front_toeB": { "x": 26.39, "y": 1.16, "rotation": 104.57, "width": 56, "height": 57 } + }, + "R_front_toe3": { + "front_toeB": { "x": 30.66, "y": -0.06, "rotation": 112.29, "width": 56, "height": 57 } + }, + "R_rear_leg": { + "R_rear_leg": { "x": 60.87, "y": -5.72, "rotation": -127.66, "width": 116, "height": 100 } + }, + "R_rear_thigh": { + "R_rear_thigh": { "x": 53.25, "y": 12.58, "rotation": 103.29, "width": 91, "height": 149 } + }, + "R_rear_toe1": { + "rear-toe": { "x": 54.75, "y": -5.72, "rotation": 134.79, "width": 109, "height": 77 } + }, + "R_rear_toe2": { + "rear-toe": { "x": 57.02, "y": -7.22, "rotation": 134.42, "width": 109, "height": 77 } + }, + "R_rear_toe3": { + "rear-toe": { "x": 47.46, "y": -7.64, "rotation": 134.34, "width": 109, "height": 77 } + }, + "R_wing": { + "R_wing01": { "x": 170.08, "y": -23.67, "rotation": -130.33, "width": 219, "height": 310 }, + "R_wing02": { "x": 171.14, "y": -19.33, "rotation": -130.33, "width": 203, "height": 305 }, + "R_wing03": { "x": 166.46, "y": 29.23, "rotation": -130.33, "width": 272, "height": 247 }, + "R_wing04": { "x": 42.94, "y": 134.05, "rotation": -130.33, "width": 279, "height": 144 }, + "R_wing05": { "x": -8.83, "y": 142.59, "rotation": -130.33, "width": 251, "height": 229 }, + "R_wing06": { "x": -123.33, "y": 111.22, "rotation": -130.33, "width": 200, "height": 366 }, + "R_wing07": { "x": -40.17, "y": 118.03, "rotation": -130.33, "width": 200, "height": 263 }, + "R_wing08": { "x": 48.01, "y": 28.76, "rotation": -130.33, "width": 234, "height": 254 }, + "R_wing09": { "x": 128.1, "y": 21.12, "rotation": -130.33, "width": 248, "height": 204 } + }, + "back": { + "back": { "x": 35.84, "y": 19.99, "rotation": -151.83, "width": 190, "height": 185 } + }, + "chest": { + "chest": { "x": -14.6, "y": 24.78, "rotation": -161.7, "width": 136, "height": 122 } + }, + "chin": { + "chin": { "x": 66.55, "y": 7.32, "rotation": 30.01, "width": 214, "height": 146 } + }, + "head": { + "head": { "x": 76.68, "y": 32.21, "rotation": -47.12, "width": 296, "height": 260 } + }, + "tail1": { + "tail01": { "x": 22.59, "y": -4.5, "rotation": 163.85, "width": 120, "height": 153 } + }, + "tail2": { + "tail02": { "x": 18.11, "y": -1.75, "rotation": 151.84, "width": 95, "height": 120 } + }, + "tail3": { + "tail03": { "x": 16.94, "y": -2, "rotation": 150.04, "width": 73, "height": 92 } + }, + "tail4": { + "tail04": { "x": 15.34, "y": -2.17, "rotation": 151.84, "width": 56, "height": 71 } + }, + "tail5": { + "tail05": { "x": 15.05, "y": -3.57, "rotation": 155, "width": 52, "height": 59 } + }, + "tail6": { + "tail06": { "x": 28.02, "y": -16.83, "rotation": -175.44, "width": 95, "height": 68 } + } + } +}, +"animations": { + "flying": { + "bones": { + "back": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.39 }, + { "time": 0.5, "angle": 0 }, + { "time": 0.8333, "angle": 7 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -8.18 }, + { "time": 0.3333, "angle": -23.16 }, + { "time": 0.5, "angle": -18.01 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chest": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -2.42 }, + { "time": 0.3333, "angle": -26.2 }, + { "time": 0.5, "angle": -29.65 }, + { "time": 0.6666, "angle": -23.15 }, + { "time": 0.8333, "angle": -55.46 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_thigh": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -1.12 }, + { "time": 0.3333, "angle": 10.48 }, + { "time": 0.5, "angle": 7.89 }, + { "time": 0.8333, "angle": -10.38 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 8.24 }, + { "time": 0.3333, "angle": 15.21 }, + { "time": 0.5, "angle": 14.84 }, + { "time": 0.8333, "angle": -18.9 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 17.46 }, + { "time": 0.3333, "angle": 22.15 }, + { "time": 0.5, "angle": 22.76 }, + { "time": 0.8333, "angle": -4.37 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail5": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 7.4 }, + { "time": 0.3333, "angle": 28.5 }, + { "time": 0.5, "angle": 21.33 }, + { "time": 0.8333, "angle": -1.27 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "tail6": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 45.99 }, + { "time": 0.4, "angle": 43.53 }, + { "time": 0.5, "angle": 61.79 }, + { "time": 0.8333, "angle": 13.28 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -14.21 }, + { "time": 0.5, "angle": 47.17 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -36.06 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -20.32 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_rear_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": -18.71 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.408, 1.36, 0.675, 1.43 ] + }, + { "time": 0.5, "angle": 1.03 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "chin": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.416, 1.15, 0.494, 1.27 ] + }, + { "time": 0.3333, "angle": -5.15 }, + { "time": 0.5, "angle": 9.79 }, + { "time": 0.6666, "angle": 18.94 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -19.18 }, + { "time": 0.3333, "angle": -32.02 }, + { "time": 0.5, "angle": -19.62 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_thigh": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -12.96 }, + { "time": 0.5, "angle": 16.2 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 37.77 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": -16.08 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.33, "y": 1.029 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe4": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 26.51 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.239, "y": 0.993 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.5, "angle": 16.99 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.402, "y": 1.007 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 26.07 }, + { "time": 0.5, "angle": -21.6 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.5, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe1": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 29.23 }, + { "time": 0.5, "angle": 34.83 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.412, "y": 1 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe2": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 24.89 }, + { "time": 0.5, "angle": 23.16 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.407, "y": 1.057 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "R_front_toe3": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.1666, "angle": 11.01 }, + { "time": 0.5, "angle": 0, "curve": "stepped" }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.5, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 }, + { "time": 0.5, "x": 1.329, "y": 1.181 }, + { "time": 1, "x": 1, "y": 1 } + ] + }, + "L_rear_leg": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.3666, "angle": 25.19 }, + { "time": 0.6666, "angle": -15.65 }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1 } + ] + }, + "COG": { + "rotate": [ + { + "time": 0, + "angle": 0, + "curve": [ 0.456, 0.2, 0.422, 1.06 ] + }, + { "time": 0.3333, "angle": 23.93 }, + { + "time": 0.6666, + "angle": 337.8, + "curve": [ 0.41, 0, 0.887, 0.75 ] + }, + { "time": 1, "angle": 0 } + ], + "translate": [ + { + "time": 0, + "x": 0, + "y": 0, + "curve": [ 0.33, 1, 0.816, 1.33 ] + }, + { + "time": 0.5, + "x": 0, + "y": 113.01, + "curve": [ 0.396, 0, 0.709, 2.03 ] + }, + { "time": 1, "x": 0, "y": 0 } + ] + } + }, + "slots": { + "R_wing": { + "attachment": [ + { "time": 0, "name": "R_wing01" }, + { "time": 0.0666, "name": "R_wing02" }, + { "time": 0.1333, "name": "R_wing03" }, + { "time": 0.2, "name": "R_wing04" }, + { "time": 0.2666, "name": "R_wing05" }, + { "time": 0.3333, "name": "R_wing06" }, + { "time": 0.4, "name": "R_wing07" }, + { "time": 0.4666, "name": "R_wing08" }, + { "time": 0.5333, "name": "R_wing09" }, + { "time": 0.6, "name": "R_wing01" }, + { "time": 0.7333, "name": "R_wing02" }, + { "time": 0.7666, "name": "R_wing02" }, + { "time": 0.8, "name": "R_wing03" }, + { "time": 0.8333, "name": "R_wing04" }, + { "time": 0.8666, "name": "R_wing05" }, + { "time": 0.9, "name": "R_wing06" }, + { "time": 0.9333, "name": "R_wing07" }, + { "time": 0.9666, "name": "R_wing08" }, + { "time": 1, "name": "R_wing09" } + ] + }, + "L_wing": { + "attachment": [ + { "time": 0, "name": "L_wing01" }, + { "time": 0.0666, "name": "L_wing02" }, + { "time": 0.1333, "name": "L_wing03" }, + { "time": 0.2, "name": "L_wing04" }, + { "time": 0.2666, "name": "L_wing05" }, + { "time": 0.3333, "name": "L_wing06" }, + { "time": 0.4, "name": "L_wing07" }, + { "time": 0.4666, "name": "L_wing08" }, + { "time": 0.5333, "name": "L_wing09" }, + { "time": 0.6, "name": "L_wing01" }, + { "time": 0.7333, "name": "L_wing02" }, + { "time": 0.8, "name": "L_wing03" }, + { "time": 0.8333, "name": "L_wing04" }, + { "time": 0.8666, "name": "L_wing05" }, + { "time": 0.9, "name": "L_wing06" }, + { "time": 0.9333, "name": "L_wing07" }, + { "time": 0.9666, "name": "L_wing08" }, + { "time": 1, "name": "L_wing09" } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/iP4_BGtile.jpg b/examples/example 12 - Spine/data/iP4_BGtile.jpg new file mode 100644 index 0000000..767a4fd --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_BGtile.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/iP4_ground.jpg b/examples/example 12 - Spine/data/iP4_ground.jpg new file mode 100644 index 0000000..3bde6d0 --- /dev/null +++ b/examples/example 12 - Spine/data/iP4_ground.jpg Binary files differ diff --git a/examples/example 12 - Spine/data/powerUp.json b/examples/example 12 - Spine/data/powerUp.json deleted file mode 100644 index d2d83eb..0000000 --- a/examples/example 12 - Spine/data/powerUp.json +++ /dev/null @@ -1,36 +0,0 @@ -{"frames": { - -"star.png": -{ - "frame": {"x":139,"y":0,"w":76,"h":72}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":76,"h":72}, - "sourceSize": {"w":76,"h":72} -}, -"token.png": -{ - "frame": {"x":0,"y":152,"w":123,"h":122}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":123,"h":122}, - "sourceSize": {"w":123,"h":122} -}, -"wing.png": -{ - "frame": {"x":0,"y":0,"w":137,"h":150}, - "rotated": false, - "trimmed": false, - "spriteSourceSize": {"x":0,"y":0,"w":137,"h":150}, - "sourceSize": {"w":137,"h":150} -}}, -"meta": { - "app": "http://www.texturepacker.com", - "version": "1.0", - "image": "powerUp.png", - "format": "RGBA8888", - "size": {"w":215,"h":274}, - "scale": "1", - "smartupdate": "$TexturePacker:SmartUpdate:1b642a8d4c97ad366346569e64075cac$" -} -} diff --git a/examples/example 12 - Spine/data/powerUp.png b/examples/example 12 - Spine/data/powerUp.png deleted file mode 100644 index 25b67fe..0000000 --- a/examples/example 12 - Spine/data/powerUp.png +++ /dev/null Binary files differ diff --git a/examples/example 12 - Spine/data/spineboy.anim b/examples/example 12 - Spine/data/spineboy.anim deleted file mode 100755 index 57b0f6c..0000000 --- a/examples/example 12 - Spine/data/spineboy.anim +++ /dev/null @@ -1,787 +0,0 @@ -{ -"bones": [ - { "name": "root" }, - { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, - { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, - { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, - { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, - { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, - { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, - { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, - { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, - { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, - { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, - { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, - { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, - { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, - { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, - { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, - { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, - { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } -], -"slots": [ - { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, - { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, - { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, - { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, - { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, - { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, - { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, - { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, - { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, - { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, - { "name": "torso", "bone": "torso", "attachment": "torso" }, - { "name": "neck", "bone": "neck", "attachment": "neck" }, - { "name": "head", "bone": "head", "attachment": "head" }, - { "name": "eyes", "bone": "head", "attachment": "eyes" }, - { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, - { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, - { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } -], -"skins": { - "default": { - "left shoulder": { - "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } - }, - "left arm": { - "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } - }, - "left hand": { - "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } - }, - "left foot": { - "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } - }, - "left lower leg": { - "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } - }, - "left upper leg": { - "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } - }, - "pelvis": { - "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } - }, - "right foot": { - "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } - }, - "right lower leg": { - "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } - }, - "right upper leg": { - "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } - }, - "torso": { - "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } - }, - "neck": { - "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } - }, - "head": { - "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } - }, - "eyes": { - "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, - "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } - }, - "right shoulder": { - "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } - }, - "right arm": { - "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } - }, - "right hand": { - "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } - } - } -}, -"animations": { - "walk": { - "bones": { - "left upper leg": { - "rotate": [ - { "time": 0, "angle": -26.55 }, - { "time": 0.1333, "angle": -8.78 }, - { "time": 0.2666, "angle": 9.51 }, - { "time": 0.4, "angle": 30.74 }, - { "time": 0.5333, "angle": 25.33 }, - { "time": 0.6666, "angle": 26.11 }, - { "time": 0.8, "angle": -7.7 }, - { "time": 0.9333, "angle": -21.19 }, - { "time": 1.0666, "angle": -26.55 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25 }, - { "time": 0.4, "x": -2.18, "y": -2.25 }, - { "time": 1.0666, "x": -3, "y": -2.25 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 42.45 }, - { "time": 0.1333, "angle": 52.1 }, - { "time": 0.2666, "angle": 5.96 }, - { "time": 0.5333, "angle": -16.93 }, - { "time": 0.6666, "angle": 1.89 }, - { - "time": 0.8, - "angle": 28.06, - "curve": [ 0.462, 0.11, 1, 1 ] - }, - { - "time": 0.9333, - "angle": 58.68, - "curve": [ 0.5, 0.02, 1, 1 ] - }, - { "time": 1.0666, "angle": 42.45 } - ], - "translate": [ - { "time": 0, "x": 8.11, "y": -2.36 }, - { "time": 0.1333, "x": 10.03, "y": -2.56 }, - { "time": 0.4, "x": 2.76, "y": -2.97 }, - { "time": 0.5333, "x": 2.76, "y": -2.81 }, - { "time": 0.9333, "x": 8.67, "y": -2.54 }, - { "time": 1.0666, "x": 8.11, "y": -2.36 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -10.21 }, - { "time": 0.1333, "angle": -55.64 }, - { "time": 0.2666, "angle": -68.12 }, - { "time": 0.5333, "angle": 5.11 }, - { "time": 0.6666, "angle": -28.29 }, - { "time": 0.8, "angle": 4.08 }, - { "time": 0.9333, "angle": 3.53 }, - { "time": 1.0666, "angle": -10.21 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": -3.69 }, - { "time": 0.1333, "angle": -10.42 }, - { "time": 0.2666, "angle": -17.14 }, - { "time": 0.4, "angle": -2.83 }, - { "time": 0.5333, "angle": -3.87 }, - { "time": 0.6666, "angle": 2.78 }, - { "time": 0.8, "angle": 1.68 }, - { "time": 0.9333, "angle": -8.54 }, - { "time": 1.0666, "angle": -3.69 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 20.89, - "curve": [ 0.264, 0, 0.75, 1 ] - }, - { - "time": 0.1333, - "angle": 3.72, - "curve": [ 0.272, 0, 0.841, 1 ] - }, - { "time": 0.6666, "angle": -278.28 }, - { "time": 1.0666, "angle": 20.89 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19 }, - { "time": 0.1333, "x": -6.36, "y": 6.42 }, - { "time": 0.6666, "x": -11.07, "y": 5.25 }, - { "time": 1.0666, "x": -7.84, "y": 7.19 } - ] - }, - "right arm": { - "rotate": [ - { - "time": 0, - "angle": -4.02, - "curve": [ 0.267, 0, 0.804, 0.99 ] - }, - { - "time": 0.1333, - "angle": -13.99, - "curve": [ 0.341, 0, 1, 1 ] - }, - { - "time": 0.6666, - "angle": 36.54, - "curve": [ 0.307, 0, 0.787, 0.99 ] - }, - { "time": 1.0666, "angle": -4.02 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92 }, - { "time": 0.4, "angle": -8.97 }, - { "time": 0.6666, "angle": 0.51 }, - { "time": 1.0666, "angle": 22.92 } - ] - }, - "left shoulder": { - "rotate": [ - { "time": 0, "angle": -1.47 }, - { "time": 0.1333, "angle": 13.6 }, - { "time": 0.6666, "angle": 280.74 }, - { "time": 1.0666, "angle": -1.47 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56 }, - { "time": 0.6666, "x": -2.47, "y": 8.14 }, - { "time": 1.0666, "x": -1.76, "y": 0.56 } - ] - }, - "left hand": { - "rotate": [ - { - "time": 0, - "angle": 11.58, - "curve": [ 0.169, 0.37, 0.632, 1.55 ] - }, - { - "time": 0.1333, - "angle": 28.13, - "curve": [ 0.692, 0, 0.692, 0.99 ] - }, - { - "time": 0.6666, - "angle": -27.42, - "curve": [ 0.117, 0.41, 0.738, 1.76 ] - }, - { "time": 0.8, "angle": -36.32 }, - { "time": 1.0666, "angle": 11.58 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": -8.27 }, - { "time": 0.1333, "angle": 18.43 }, - { "time": 0.6666, "angle": 0.88 }, - { "time": 1.0666, "angle": -8.27 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -10.28 }, - { - "time": 0.1333, - "angle": -15.38, - "curve": [ 0.545, 0, 1, 1 ] - }, - { - "time": 0.4, - "angle": -9.78, - "curve": [ 0.58, 0.17, 1, 1 ] - }, - { "time": 0.6666, "angle": -15.75 }, - { "time": 0.9333, "angle": -7.06 }, - { "time": 1.0666, "angle": -10.28 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68 }, - { "time": 0.1333, "x": -3.67, "y": 0.68 }, - { "time": 0.4, "x": -3.67, "y": 1.97 }, - { "time": 0.6666, "x": -3.67, "y": -0.14 }, - { "time": 1.0666, "x": -3.67, "y": 1.68 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": -5.25 }, - { "time": 0.2666, "angle": -4.08 }, - { "time": 0.4, "angle": -6.45 }, - { "time": 0.5333, "angle": -5.39 }, - { "time": 0.8, "angle": -11.68 }, - { "time": 0.9333, "angle": 0.46 }, - { "time": 1.0666, "angle": -5.25 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -3.39 }, - { "time": 0.1333, "angle": -45.53 }, - { "time": 0.2666, "angle": -2.59 }, - { "time": 0.5333, "angle": -19.53 }, - { "time": 0.6666, "angle": -64.8 }, - { - "time": 0.8, - "angle": -82.56, - "curve": [ 0.557, 0.18, 1, 1 ] - }, - { "time": 1.0666, "angle": -3.39 } - ] - }, - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 1.0666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0 }, - { - "time": 0.1333, - "x": 0, - "y": -7.61, - "curve": [ 0.272, 0.86, 1, 1 ] - }, - { "time": 0.4, "x": 0, "y": 8.7 }, - { "time": 0.5333, "x": 0, "y": -0.41 }, - { - "time": 0.6666, - "x": 0, - "y": -7.05, - "curve": [ 0.235, 0.89, 1, 1 ] - }, - { "time": 0.8, "x": 0, "y": 2.92 }, - { "time": 0.9333, "x": 0, "y": 6.78 }, - { "time": 1.0666, "x": 0, "y": 0 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 3.6 }, - { "time": 0.1333, "angle": 17.49 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { "time": 0.5333, "angle": 5.17 }, - { "time": 0.6666, "angle": 18.36 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - }, - "head": { - "rotate": [ - { - "time": 0, - "angle": 3.6, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.1666, "angle": -0.2 }, - { "time": 0.2666, "angle": 6.1 }, - { "time": 0.4, "angle": 3.45 }, - { - "time": 0.5333, - "angle": 5.17, - "curve": [ 0, 0, 0.704, 1.61 ] - }, - { "time": 0.7, "angle": 1.1 }, - { "time": 0.8, "angle": 6.09 }, - { "time": 0.9333, "angle": 2.28 }, - { "time": 1.0666, "angle": 3.6 } - ] - } - } - }, - "jump": { - "bones": { - "hip": { - "rotate": [ - { "time": 0, "angle": 0, "curve": "stepped" }, - { "time": 0.9333, "angle": 0, "curve": "stepped" }, - { "time": 1.3666, "angle": 0 } - ], - "translate": [ - { "time": 0, "x": -11.57, "y": -3 }, - { "time": 0.2333, "x": -16.2, "y": -19.43 }, - { - "time": 0.3333, - "x": 7.66, - "y": -8.48, - "curve": [ 0.057, 0.06, 0.712, 1 ] - }, - { "time": 0.3666, "x": 15.38, "y": 5.01 }, - { "time": 0.4666, "x": -7.84, "y": 57.22 }, - { - "time": 0.6, - "x": -10.81, - "y": 96.34, - "curve": [ 0.241, 0, 1, 1 ] - }, - { "time": 0.7333, "x": -7.01, "y": 54.7 }, - { "time": 0.8, "x": -10.58, "y": 32.2 }, - { "time": 0.9333, "x": -31.99, "y": 0.45 }, - { "time": 1.0666, "x": -12.48, "y": -29.47 }, - { "time": 1.3666, "x": -11.57, "y": -3 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left upper leg": { - "rotate": [ - { "time": 0, "angle": 17.13 }, - { "time": 0.2333, "angle": 44.35 }, - { "time": 0.3333, "angle": 16.46 }, - { "time": 0.4, "angle": -9.88 }, - { "time": 0.4666, "angle": -11.42 }, - { "time": 0.5666, "angle": 23.46 }, - { "time": 0.7666, "angle": 71.82 }, - { "time": 0.9333, "angle": 65.53 }, - { "time": 1.0666, "angle": 51.01 }, - { "time": 1.3666, "angle": 17.13 } - ], - "translate": [ - { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, - { "time": 1.3666, "x": -3, "y": -2.25 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left lower leg": { - "rotate": [ - { "time": 0, "angle": -16.25 }, - { "time": 0.2333, "angle": -52.21 }, - { "time": 0.4, "angle": 15.04 }, - { "time": 0.4666, "angle": -8.95 }, - { "time": 0.5666, "angle": -39.53 }, - { "time": 0.7666, "angle": -27.27 }, - { "time": 0.9333, "angle": -3.52 }, - { "time": 1.0666, "angle": -61.92 }, - { "time": 1.3666, "angle": -16.25 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left foot": { - "rotate": [ - { "time": 0, "angle": 0.33 }, - { "time": 0.2333, "angle": 6.2 }, - { "time": 0.3333, "angle": 14.73 }, - { "time": 0.4, "angle": -15.54 }, - { "time": 0.4333, "angle": -21.2 }, - { "time": 0.5666, "angle": -7.55 }, - { "time": 0.7666, "angle": -0.67 }, - { "time": 0.9333, "angle": -0.58 }, - { "time": 1.0666, "angle": 14.64 }, - { "time": 1.3666, "angle": 0.33 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right upper leg": { - "rotate": [ - { "time": 0, "angle": 25.97 }, - { "time": 0.2333, "angle": 46.43 }, - { "time": 0.3333, "angle": 22.61 }, - { "time": 0.4, "angle": 2.13 }, - { - "time": 0.4666, - "angle": 0.04, - "curve": [ 0, 0, 0.637, 0.98 ] - }, - { "time": 0.6, "angle": 65.55 }, - { "time": 0.7666, "angle": 64.93 }, - { "time": 0.9333, "angle": 41.08 }, - { "time": 1.0666, "angle": 66.25 }, - { "time": 1.3666, "angle": 25.97 } - ], - "translate": [ - { "time": 0, "x": 5.74, "y": 0.61 }, - { "time": 0.2333, "x": 4.79, "y": 1.79 }, - { "time": 0.3333, "x": 6.05, "y": -4.55 }, - { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, - { "time": 1.0666, "x": 4.79, "y": 1.79 }, - { "time": 1.3666, "x": 5.74, "y": 0.61 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right lower leg": { - "rotate": [ - { "time": 0, "angle": -27.46 }, - { "time": 0.2333, "angle": -64.03 }, - { "time": 0.4, "angle": -48.36 }, - { "time": 0.5666, "angle": -76.86 }, - { "time": 0.7666, "angle": -26.89 }, - { "time": 0.9, "angle": -18.97 }, - { "time": 0.9333, "angle": -14.18 }, - { "time": 1.0666, "angle": -80.45 }, - { "time": 1.3666, "angle": -27.46 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right foot": { - "rotate": [ - { "time": 0, "angle": 1.08 }, - { "time": 0.2333, "angle": 16.02 }, - { "time": 0.3, "angle": 12.94 }, - { "time": 0.3333, "angle": 15.16 }, - { "time": 0.4, "angle": -14.7 }, - { "time": 0.4333, "angle": -12.85 }, - { "time": 0.4666, "angle": -19.18 }, - { "time": 0.5666, "angle": -15.82 }, - { "time": 0.6, "angle": -3.59 }, - { "time": 0.7666, "angle": -3.56 }, - { "time": 0.9333, "angle": 1.86 }, - { "time": 1.0666, "angle": 16.02 }, - { "time": 1.3666, "angle": 1.08 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "torso": { - "rotate": [ - { "time": 0, "angle": -13.35 }, - { "time": 0.2333, "angle": -48.95 }, - { "time": 0.4333, "angle": -35.77 }, - { "time": 0.6, "angle": -4.59 }, - { "time": 0.7666, "angle": 14.61 }, - { "time": 0.9333, "angle": 15.74 }, - { "time": 1.0666, "angle": -32.44 }, - { "time": 1.3666, "angle": -13.35 } - ], - "translate": [ - { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, - { "time": 1.3666, "x": -3.67, "y": 1.68 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "neck": { - "rotate": [ - { "time": 0, "angle": 12.78 }, - { "time": 0.2333, "angle": 16.46 }, - { "time": 0.4, "angle": 26.49 }, - { "time": 0.6, "angle": 15.51 }, - { "time": 0.7666, "angle": 1.34 }, - { "time": 0.9333, "angle": 2.35 }, - { "time": 1.0666, "angle": 6.08 }, - { "time": 1.3, "angle": 21.23 }, - { "time": 1.3666, "angle": 12.78 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "head": { - "rotate": [ - { "time": 0, "angle": 5.19 }, - { "time": 0.2333, "angle": 20.27 }, - { "time": 0.4, "angle": 15.27 }, - { "time": 0.6, "angle": -24.69 }, - { "time": 0.7666, "angle": -11.02 }, - { "time": 0.9333, "angle": -24.38 }, - { "time": 1.0666, "angle": 11.99 }, - { "time": 1.3, "angle": 4.86 }, - { "time": 1.3666, "angle": 5.19 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left shoulder": { - "rotate": [ - { - "time": 0, - "angle": 0.05, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": 279.66, - "curve": [ 0.218, 0.67, 0.66, 0.99 ] - }, - { - "time": 0.5, - "angle": 62.27, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": 28.91 }, - { "time": 1.0666, "angle": -8.62 }, - { "time": 1.1666, "angle": -18.43 }, - { "time": 1.3666, "angle": 0.05 } - ], - "translate": [ - { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, - { "time": 1.3666, "x": -1.76, "y": 0.56 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left hand": { - "rotate": [ - { "time": 0, "angle": 11.58, "curve": "stepped" }, - { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, - { "time": 1.3666, "angle": 11.58 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "left arm": { - "rotate": [ - { "time": 0, "angle": 0.51 }, - { "time": 0.4333, "angle": 12.82 }, - { "time": 0.6, "angle": 47.55 }, - { "time": 0.9333, "angle": 12.82 }, - { "time": 1.1666, "angle": -6.5 }, - { "time": 1.3666, "angle": 0.51 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right shoulder": { - "rotate": [ - { - "time": 0, - "angle": 43.82, - "curve": [ 0, 0, 0.62, 1 ] - }, - { - "time": 0.2333, - "angle": -8.74, - "curve": [ 0.304, 0.58, 0.709, 0.97 ] - }, - { - "time": 0.5333, - "angle": -208.02, - "curve": [ 0.462, 0, 0.764, 0.58 ] - }, - { "time": 0.9333, "angle": -246.72 }, - { "time": 1.0666, "angle": -307.13 }, - { "time": 1.1666, "angle": 37.15 }, - { "time": 1.3666, "angle": 43.82 } - ], - "translate": [ - { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, - { "time": 1.3666, "x": -7.84, "y": 7.19 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right arm": { - "rotate": [ - { "time": 0, "angle": -4.02 }, - { "time": 0.6, "angle": 17.5 }, - { "time": 0.9333, "angle": -4.02 }, - { "time": 1.1666, "angle": -16.72 }, - { "time": 1.3666, "angle": -4.02 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "right hand": { - "rotate": [ - { "time": 0, "angle": 22.92, "curve": "stepped" }, - { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, - { "time": 1.3666, "angle": 22.92 } - ], - "translate": [ - { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, - { "time": 1.3666, "x": 0, "y": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - }, - "root": { - "rotate": [ - { "time": 0, "angle": 0 }, - { "time": 0.4333, "angle": -14.52 }, - { "time": 0.8, "angle": 9.86 }, - { "time": 1.3666, "angle": 0 } - ], - "scale": [ - { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, - { "time": 1.3666, "x": 1, "y": 1 } - ] - } - } - } -} -} \ No newline at end of file diff --git a/examples/example 12 - Spine/data/spineboySpineData.json b/examples/example 12 - Spine/data/spineboySpineData.json new file mode 100755 index 0000000..57b0f6c --- /dev/null +++ b/examples/example 12 - Spine/data/spineboySpineData.json @@ -0,0 +1,787 @@ +{ +"bones": [ + { "name": "root" }, + { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 }, + { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }, + { "name": "left lower leg", "parent": "left upper leg", "length": 56.45, "x": 51.78, "y": 3.46, "rotation": -16.65 }, + { "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 64.02, "y": -8.67, "rotation": 102.43 }, + { "name": "right upper leg", "parent": "hip", "length": 45.76, "x": -18.27, "rotation": -101.13 }, + { "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 50.21, "y": 0.6, "rotation": -10.7 }, + { "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 }, + { "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 94.95 }, + { "name": "neck", "parent": "torso", "length": 18.38, "x": 83.64, "y": -1.78, "rotation": 0.9 }, + { "name": "head", "parent": "neck", "length": 68.28, "x": 19.09, "y": 6.97, "rotation": -8.94 }, + { "name": "right shoulder", "parent": "torso", "length": 49.95, "x": 81.9, "y": 6.79, "rotation": 130.6 }, + { "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 49.95, "y": -0.12, "rotation": 40.12 }, + { "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 }, + { "name": "left shoulder", "parent": "torso", "length": 44.19, "x": 78.96, "y": -15.75, "rotation": -156.96 }, + { "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 44.19, "y": -0.01, "rotation": 28.16 }, + { "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 }, + { "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 } +], +"slots": [ + { "name": "left shoulder", "bone": "left shoulder", "attachment": "left-shoulder" }, + { "name": "left arm", "bone": "left arm", "attachment": "left-arm" }, + { "name": "left hand", "bone": "left hand", "attachment": "left-hand" }, + { "name": "left foot", "bone": "left foot", "attachment": "left-foot" }, + { "name": "left lower leg", "bone": "left lower leg", "attachment": "left-lower-leg" }, + { "name": "left upper leg", "bone": "left upper leg", "attachment": "left-upper-leg" }, + { "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" }, + { "name": "right foot", "bone": "right foot", "attachment": "right-foot" }, + { "name": "right lower leg", "bone": "right lower leg", "attachment": "right-lower-leg" }, + { "name": "right upper leg", "bone": "right upper leg", "attachment": "right-upper-leg" }, + { "name": "torso", "bone": "torso", "attachment": "torso" }, + { "name": "neck", "bone": "neck", "attachment": "neck" }, + { "name": "head", "bone": "head", "attachment": "head" }, + { "name": "eyes", "bone": "head", "attachment": "eyes" }, + { "name": "right shoulder", "bone": "right shoulder", "attachment": "right-shoulder" }, + { "name": "right arm", "bone": "right arm", "attachment": "right-arm" }, + { "name": "right hand", "bone": "right hand", "attachment": "right-hand" } +], +"skins": { + "default": { + "left shoulder": { + "left-shoulder": { "x": 23.74, "y": 0.11, "rotation": 62.01, "width": 34, "height": 53 } + }, + "left arm": { + "left-arm": { "x": 15.11, "y": -0.44, "rotation": 33.84, "width": 35, "height": 29 } + }, + "left hand": { + "left-hand": { "x": 0.75, "y": 1.86, "rotation": 31.14, "width": 35, "height": 38 } + }, + "left foot": { + "left-foot": { "x": 24.35, "y": 8.88, "rotation": 3.32, "width": 65, "height": 30 } + }, + "left lower leg": { + "left-lower-leg": { "x": 24.55, "y": -1.92, "rotation": 105.75, "width": 49, "height": 64 } + }, + "left upper leg": { + "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 } + }, + "pelvis": { + "pelvis": { "x": -4.83, "y": 10.62, "width": 63, "height": 47 } + }, + "right foot": { + "right-foot": { "x": 19.02, "y": 8.47, "rotation": 1.52, "width": 67, "height": 30 } + }, + "right lower leg": { + "right-lower-leg": { "x": 23.28, "y": -2.59, "rotation": 111.83, "width": 51, "height": 64 } + }, + "right upper leg": { + "right-upper-leg": { "x": 23.03, "y": 0.25, "rotation": 101.13, "width": 44, "height": 70 } + }, + "torso": { + "torso": { "x": 44.57, "y": -7.08, "rotation": -94.95, "width": 68, "height": 92 } + }, + "neck": { + "neck": { "x": 9.42, "y": -3.66, "rotation": -100.15, "width": 34, "height": 28 } + }, + "head": { + "head": { "x": 53.94, "y": -5.75, "rotation": -86.9, "width": 121, "height": 132 } + }, + "eyes": { + "eyes": { "x": 28.94, "y": -32.92, "rotation": -86.9, "width": 34, "height": 27 }, + "eyes-closed": { "x": 28.77, "y": -32.86, "rotation": -86.9, "width": 34, "height": 27 } + }, + "right shoulder": { + "right-shoulder": { "x": 25.86, "y": 0.03, "rotation": 134.44, "width": 52, "height": 51 } + }, + "right arm": { + "right-arm": { "x": 18.34, "y": -2.64, "rotation": 94.32, "width": 21, "height": 45 } + }, + "right hand": { + "right-hand": { "x": 6.82, "y": 1.25, "rotation": 91.96, "width": 32, "height": 32 } + } + } +}, +"animations": { + "walk": { + "bones": { + "left upper leg": { + "rotate": [ + { "time": 0, "angle": -26.55 }, + { "time": 0.1333, "angle": -8.78 }, + { "time": 0.2666, "angle": 9.51 }, + { "time": 0.4, "angle": 30.74 }, + { "time": 0.5333, "angle": 25.33 }, + { "time": 0.6666, "angle": 26.11 }, + { "time": 0.8, "angle": -7.7 }, + { "time": 0.9333, "angle": -21.19 }, + { "time": 1.0666, "angle": -26.55 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25 }, + { "time": 0.4, "x": -2.18, "y": -2.25 }, + { "time": 1.0666, "x": -3, "y": -2.25 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 42.45 }, + { "time": 0.1333, "angle": 52.1 }, + { "time": 0.2666, "angle": 5.96 }, + { "time": 0.5333, "angle": -16.93 }, + { "time": 0.6666, "angle": 1.89 }, + { + "time": 0.8, + "angle": 28.06, + "curve": [ 0.462, 0.11, 1, 1 ] + }, + { + "time": 0.9333, + "angle": 58.68, + "curve": [ 0.5, 0.02, 1, 1 ] + }, + { "time": 1.0666, "angle": 42.45 } + ], + "translate": [ + { "time": 0, "x": 8.11, "y": -2.36 }, + { "time": 0.1333, "x": 10.03, "y": -2.56 }, + { "time": 0.4, "x": 2.76, "y": -2.97 }, + { "time": 0.5333, "x": 2.76, "y": -2.81 }, + { "time": 0.9333, "x": 8.67, "y": -2.54 }, + { "time": 1.0666, "x": 8.11, "y": -2.36 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -10.21 }, + { "time": 0.1333, "angle": -55.64 }, + { "time": 0.2666, "angle": -68.12 }, + { "time": 0.5333, "angle": 5.11 }, + { "time": 0.6666, "angle": -28.29 }, + { "time": 0.8, "angle": 4.08 }, + { "time": 0.9333, "angle": 3.53 }, + { "time": 1.0666, "angle": -10.21 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": -3.69 }, + { "time": 0.1333, "angle": -10.42 }, + { "time": 0.2666, "angle": -17.14 }, + { "time": 0.4, "angle": -2.83 }, + { "time": 0.5333, "angle": -3.87 }, + { "time": 0.6666, "angle": 2.78 }, + { "time": 0.8, "angle": 1.68 }, + { "time": 0.9333, "angle": -8.54 }, + { "time": 1.0666, "angle": -3.69 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 20.89, + "curve": [ 0.264, 0, 0.75, 1 ] + }, + { + "time": 0.1333, + "angle": 3.72, + "curve": [ 0.272, 0, 0.841, 1 ] + }, + { "time": 0.6666, "angle": -278.28 }, + { "time": 1.0666, "angle": 20.89 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19 }, + { "time": 0.1333, "x": -6.36, "y": 6.42 }, + { "time": 0.6666, "x": -11.07, "y": 5.25 }, + { "time": 1.0666, "x": -7.84, "y": 7.19 } + ] + }, + "right arm": { + "rotate": [ + { + "time": 0, + "angle": -4.02, + "curve": [ 0.267, 0, 0.804, 0.99 ] + }, + { + "time": 0.1333, + "angle": -13.99, + "curve": [ 0.341, 0, 1, 1 ] + }, + { + "time": 0.6666, + "angle": 36.54, + "curve": [ 0.307, 0, 0.787, 0.99 ] + }, + { "time": 1.0666, "angle": -4.02 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92 }, + { "time": 0.4, "angle": -8.97 }, + { "time": 0.6666, "angle": 0.51 }, + { "time": 1.0666, "angle": 22.92 } + ] + }, + "left shoulder": { + "rotate": [ + { "time": 0, "angle": -1.47 }, + { "time": 0.1333, "angle": 13.6 }, + { "time": 0.6666, "angle": 280.74 }, + { "time": 1.0666, "angle": -1.47 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56 }, + { "time": 0.6666, "x": -2.47, "y": 8.14 }, + { "time": 1.0666, "x": -1.76, "y": 0.56 } + ] + }, + "left hand": { + "rotate": [ + { + "time": 0, + "angle": 11.58, + "curve": [ 0.169, 0.37, 0.632, 1.55 ] + }, + { + "time": 0.1333, + "angle": 28.13, + "curve": [ 0.692, 0, 0.692, 0.99 ] + }, + { + "time": 0.6666, + "angle": -27.42, + "curve": [ 0.117, 0.41, 0.738, 1.76 ] + }, + { "time": 0.8, "angle": -36.32 }, + { "time": 1.0666, "angle": 11.58 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": -8.27 }, + { "time": 0.1333, "angle": 18.43 }, + { "time": 0.6666, "angle": 0.88 }, + { "time": 1.0666, "angle": -8.27 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -10.28 }, + { + "time": 0.1333, + "angle": -15.38, + "curve": [ 0.545, 0, 1, 1 ] + }, + { + "time": 0.4, + "angle": -9.78, + "curve": [ 0.58, 0.17, 1, 1 ] + }, + { "time": 0.6666, "angle": -15.75 }, + { "time": 0.9333, "angle": -7.06 }, + { "time": 1.0666, "angle": -10.28 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68 }, + { "time": 0.1333, "x": -3.67, "y": 0.68 }, + { "time": 0.4, "x": -3.67, "y": 1.97 }, + { "time": 0.6666, "x": -3.67, "y": -0.14 }, + { "time": 1.0666, "x": -3.67, "y": 1.68 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": -5.25 }, + { "time": 0.2666, "angle": -4.08 }, + { "time": 0.4, "angle": -6.45 }, + { "time": 0.5333, "angle": -5.39 }, + { "time": 0.8, "angle": -11.68 }, + { "time": 0.9333, "angle": 0.46 }, + { "time": 1.0666, "angle": -5.25 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -3.39 }, + { "time": 0.1333, "angle": -45.53 }, + { "time": 0.2666, "angle": -2.59 }, + { "time": 0.5333, "angle": -19.53 }, + { "time": 0.6666, "angle": -64.8 }, + { + "time": 0.8, + "angle": -82.56, + "curve": [ 0.557, 0.18, 1, 1 ] + }, + { "time": 1.0666, "angle": -3.39 } + ] + }, + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 1.0666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0 }, + { + "time": 0.1333, + "x": 0, + "y": -7.61, + "curve": [ 0.272, 0.86, 1, 1 ] + }, + { "time": 0.4, "x": 0, "y": 8.7 }, + { "time": 0.5333, "x": 0, "y": -0.41 }, + { + "time": 0.6666, + "x": 0, + "y": -7.05, + "curve": [ 0.235, 0.89, 1, 1 ] + }, + { "time": 0.8, "x": 0, "y": 2.92 }, + { "time": 0.9333, "x": 0, "y": 6.78 }, + { "time": 1.0666, "x": 0, "y": 0 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 3.6 }, + { "time": 0.1333, "angle": 17.49 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { "time": 0.5333, "angle": 5.17 }, + { "time": 0.6666, "angle": 18.36 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + }, + "head": { + "rotate": [ + { + "time": 0, + "angle": 3.6, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.1666, "angle": -0.2 }, + { "time": 0.2666, "angle": 6.1 }, + { "time": 0.4, "angle": 3.45 }, + { + "time": 0.5333, + "angle": 5.17, + "curve": [ 0, 0, 0.704, 1.61 ] + }, + { "time": 0.7, "angle": 1.1 }, + { "time": 0.8, "angle": 6.09 }, + { "time": 0.9333, "angle": 2.28 }, + { "time": 1.0666, "angle": 3.6 } + ] + } + } + }, + "jump": { + "bones": { + "hip": { + "rotate": [ + { "time": 0, "angle": 0, "curve": "stepped" }, + { "time": 0.9333, "angle": 0, "curve": "stepped" }, + { "time": 1.3666, "angle": 0 } + ], + "translate": [ + { "time": 0, "x": -11.57, "y": -3 }, + { "time": 0.2333, "x": -16.2, "y": -19.43 }, + { + "time": 0.3333, + "x": 7.66, + "y": -8.48, + "curve": [ 0.057, 0.06, 0.712, 1 ] + }, + { "time": 0.3666, "x": 15.38, "y": 5.01 }, + { "time": 0.4666, "x": -7.84, "y": 57.22 }, + { + "time": 0.6, + "x": -10.81, + "y": 96.34, + "curve": [ 0.241, 0, 1, 1 ] + }, + { "time": 0.7333, "x": -7.01, "y": 54.7 }, + { "time": 0.8, "x": -10.58, "y": 32.2 }, + { "time": 0.9333, "x": -31.99, "y": 0.45 }, + { "time": 1.0666, "x": -12.48, "y": -29.47 }, + { "time": 1.3666, "x": -11.57, "y": -3 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left upper leg": { + "rotate": [ + { "time": 0, "angle": 17.13 }, + { "time": 0.2333, "angle": 44.35 }, + { "time": 0.3333, "angle": 16.46 }, + { "time": 0.4, "angle": -9.88 }, + { "time": 0.4666, "angle": -11.42 }, + { "time": 0.5666, "angle": 23.46 }, + { "time": 0.7666, "angle": 71.82 }, + { "time": 0.9333, "angle": 65.53 }, + { "time": 1.0666, "angle": 51.01 }, + { "time": 1.3666, "angle": 17.13 } + ], + "translate": [ + { "time": 0, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 0.9333, "x": -3, "y": -2.25, "curve": "stepped" }, + { "time": 1.3666, "x": -3, "y": -2.25 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left lower leg": { + "rotate": [ + { "time": 0, "angle": -16.25 }, + { "time": 0.2333, "angle": -52.21 }, + { "time": 0.4, "angle": 15.04 }, + { "time": 0.4666, "angle": -8.95 }, + { "time": 0.5666, "angle": -39.53 }, + { "time": 0.7666, "angle": -27.27 }, + { "time": 0.9333, "angle": -3.52 }, + { "time": 1.0666, "angle": -61.92 }, + { "time": 1.3666, "angle": -16.25 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left foot": { + "rotate": [ + { "time": 0, "angle": 0.33 }, + { "time": 0.2333, "angle": 6.2 }, + { "time": 0.3333, "angle": 14.73 }, + { "time": 0.4, "angle": -15.54 }, + { "time": 0.4333, "angle": -21.2 }, + { "time": 0.5666, "angle": -7.55 }, + { "time": 0.7666, "angle": -0.67 }, + { "time": 0.9333, "angle": -0.58 }, + { "time": 1.0666, "angle": 14.64 }, + { "time": 1.3666, "angle": 0.33 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right upper leg": { + "rotate": [ + { "time": 0, "angle": 25.97 }, + { "time": 0.2333, "angle": 46.43 }, + { "time": 0.3333, "angle": 22.61 }, + { "time": 0.4, "angle": 2.13 }, + { + "time": 0.4666, + "angle": 0.04, + "curve": [ 0, 0, 0.637, 0.98 ] + }, + { "time": 0.6, "angle": 65.55 }, + { "time": 0.7666, "angle": 64.93 }, + { "time": 0.9333, "angle": 41.08 }, + { "time": 1.0666, "angle": 66.25 }, + { "time": 1.3666, "angle": 25.97 } + ], + "translate": [ + { "time": 0, "x": 5.74, "y": 0.61 }, + { "time": 0.2333, "x": 4.79, "y": 1.79 }, + { "time": 0.3333, "x": 6.05, "y": -4.55 }, + { "time": 0.9333, "x": 4.79, "y": 1.79, "curve": "stepped" }, + { "time": 1.0666, "x": 4.79, "y": 1.79 }, + { "time": 1.3666, "x": 5.74, "y": 0.61 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right lower leg": { + "rotate": [ + { "time": 0, "angle": -27.46 }, + { "time": 0.2333, "angle": -64.03 }, + { "time": 0.4, "angle": -48.36 }, + { "time": 0.5666, "angle": -76.86 }, + { "time": 0.7666, "angle": -26.89 }, + { "time": 0.9, "angle": -18.97 }, + { "time": 0.9333, "angle": -14.18 }, + { "time": 1.0666, "angle": -80.45 }, + { "time": 1.3666, "angle": -27.46 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right foot": { + "rotate": [ + { "time": 0, "angle": 1.08 }, + { "time": 0.2333, "angle": 16.02 }, + { "time": 0.3, "angle": 12.94 }, + { "time": 0.3333, "angle": 15.16 }, + { "time": 0.4, "angle": -14.7 }, + { "time": 0.4333, "angle": -12.85 }, + { "time": 0.4666, "angle": -19.18 }, + { "time": 0.5666, "angle": -15.82 }, + { "time": 0.6, "angle": -3.59 }, + { "time": 0.7666, "angle": -3.56 }, + { "time": 0.9333, "angle": 1.86 }, + { "time": 1.0666, "angle": 16.02 }, + { "time": 1.3666, "angle": 1.08 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "torso": { + "rotate": [ + { "time": 0, "angle": -13.35 }, + { "time": 0.2333, "angle": -48.95 }, + { "time": 0.4333, "angle": -35.77 }, + { "time": 0.6, "angle": -4.59 }, + { "time": 0.7666, "angle": 14.61 }, + { "time": 0.9333, "angle": 15.74 }, + { "time": 1.0666, "angle": -32.44 }, + { "time": 1.3666, "angle": -13.35 } + ], + "translate": [ + { "time": 0, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 0.9333, "x": -3.67, "y": 1.68, "curve": "stepped" }, + { "time": 1.3666, "x": -3.67, "y": 1.68 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "neck": { + "rotate": [ + { "time": 0, "angle": 12.78 }, + { "time": 0.2333, "angle": 16.46 }, + { "time": 0.4, "angle": 26.49 }, + { "time": 0.6, "angle": 15.51 }, + { "time": 0.7666, "angle": 1.34 }, + { "time": 0.9333, "angle": 2.35 }, + { "time": 1.0666, "angle": 6.08 }, + { "time": 1.3, "angle": 21.23 }, + { "time": 1.3666, "angle": 12.78 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "head": { + "rotate": [ + { "time": 0, "angle": 5.19 }, + { "time": 0.2333, "angle": 20.27 }, + { "time": 0.4, "angle": 15.27 }, + { "time": 0.6, "angle": -24.69 }, + { "time": 0.7666, "angle": -11.02 }, + { "time": 0.9333, "angle": -24.38 }, + { "time": 1.0666, "angle": 11.99 }, + { "time": 1.3, "angle": 4.86 }, + { "time": 1.3666, "angle": 5.19 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left shoulder": { + "rotate": [ + { + "time": 0, + "angle": 0.05, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": 279.66, + "curve": [ 0.218, 0.67, 0.66, 0.99 ] + }, + { + "time": 0.5, + "angle": 62.27, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": 28.91 }, + { "time": 1.0666, "angle": -8.62 }, + { "time": 1.1666, "angle": -18.43 }, + { "time": 1.3666, "angle": 0.05 } + ], + "translate": [ + { "time": 0, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 0.9333, "x": -1.76, "y": 0.56, "curve": "stepped" }, + { "time": 1.3666, "x": -1.76, "y": 0.56 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left hand": { + "rotate": [ + { "time": 0, "angle": 11.58, "curve": "stepped" }, + { "time": 0.9333, "angle": 11.58, "curve": "stepped" }, + { "time": 1.3666, "angle": 11.58 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "left arm": { + "rotate": [ + { "time": 0, "angle": 0.51 }, + { "time": 0.4333, "angle": 12.82 }, + { "time": 0.6, "angle": 47.55 }, + { "time": 0.9333, "angle": 12.82 }, + { "time": 1.1666, "angle": -6.5 }, + { "time": 1.3666, "angle": 0.51 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right shoulder": { + "rotate": [ + { + "time": 0, + "angle": 43.82, + "curve": [ 0, 0, 0.62, 1 ] + }, + { + "time": 0.2333, + "angle": -8.74, + "curve": [ 0.304, 0.58, 0.709, 0.97 ] + }, + { + "time": 0.5333, + "angle": -208.02, + "curve": [ 0.462, 0, 0.764, 0.58 ] + }, + { "time": 0.9333, "angle": -246.72 }, + { "time": 1.0666, "angle": -307.13 }, + { "time": 1.1666, "angle": 37.15 }, + { "time": 1.3666, "angle": 43.82 } + ], + "translate": [ + { "time": 0, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 0.9333, "x": -7.84, "y": 7.19, "curve": "stepped" }, + { "time": 1.3666, "x": -7.84, "y": 7.19 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right arm": { + "rotate": [ + { "time": 0, "angle": -4.02 }, + { "time": 0.6, "angle": 17.5 }, + { "time": 0.9333, "angle": -4.02 }, + { "time": 1.1666, "angle": -16.72 }, + { "time": 1.3666, "angle": -4.02 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "right hand": { + "rotate": [ + { "time": 0, "angle": 22.92, "curve": "stepped" }, + { "time": 0.9333, "angle": 22.92, "curve": "stepped" }, + { "time": 1.3666, "angle": 22.92 } + ], + "translate": [ + { "time": 0, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 0.9333, "x": 0, "y": 0, "curve": "stepped" }, + { "time": 1.3666, "x": 0, "y": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 0.9333, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + }, + "root": { + "rotate": [ + { "time": 0, "angle": 0 }, + { "time": 0.4333, "angle": -14.52 }, + { "time": 0.8, "angle": 9.86 }, + { "time": 1.3666, "angle": 0 } + ], + "scale": [ + { "time": 0, "x": 1, "y": 1, "curve": "stepped" }, + { "time": 1.3666, "x": 1, "y": 1 } + ] + } + } + } +} +} \ No newline at end of file diff --git a/examples/example 12 - Spine/index.html b/examples/example 12 - Spine/index.html index bae38d5..8b4dc17 100644 --- a/examples/example 12 - Spine/index.html +++ b/examples/example 12 - Spine/index.html @@ -21,7 +21,7 @@ // create an array of assets to load - var assetsToLoader = ["data/spineboy.json", "data/spineboy.anim"]; + var assetsToLoader = ["data/spineboy.json", "data/spineboySpineData.json"]; // create a new loader loader = new PIXI.AssetLoader(assetsToLoader); @@ -47,16 +47,20 @@ function onAssetsLoaded() { - var spineBoy = new PIXI.Spine("data/spineboy.anim"); + // create a spine boy + var spineBoy = new PIXI.Spine("data/spineboySpineData.json"); + // set the position spineBoy.position.x = window.innerWidth/2; spineBoy.position.y = window.innerHeight; spineBoy.scale.x = spineBoy.scale.y = window.innerHeight / 400; + // set up the mixes! spineBoy.stateData.setMixByName("walk", "jump", 0.2); spineBoy.stateData.setMixByName("jump", "walk", 0.4); + // play animation spineBoy.state.setAnimationByName("walk", true); diff --git a/examples/example 12 - Spine/index_pixie.html b/examples/example 12 - Spine/index_pixie.html index 0dd475a..8a32112 100644 --- a/examples/example 12 - Spine/index_pixie.html +++ b/examples/example 12 - Spine/index_pixie.html @@ -61,31 +61,31 @@ stage.addChild(foreground2); foreground.position.y = foreground2.position.y = 640 - foreground2.height; - var dragon = new PIXI.Spine("data/PixieSpineData.json"); + var pixie = new PIXI.Spine("data/PixieSpineData.json"); var scale = 0.3;//window.innerHeight / 700; - dragon.position.x = 1024/3; - dragon.position.y = 500 + pixie.position.x = 1024/3; + pixie.position.y = 500 - dragon.scale.x = dragon.scale.y = scale + pixie.scale.x = pixie.scale.y = scale //dragon.state.setAnimationByName("running", true); - stage.addChild(dragon); + stage.addChild(pixie); - dragon.stateData.setMixByName("running", "jump", 0.2); - dragon.stateData.setMixByName("jump", "running", 0.4); + pixie.stateData.setMixByName("running", "jump", 0.2); + pixie.stateData.setMixByName("jump", "running", 0.4); - dragon.state.setAnimationByName("running", true); + pixie.state.setAnimationByName("running", true); stage.click = function() { - dragon.state.setAnimationByName("jump", false); - dragon.state.addAnimationByName("running", true); + pixie.state.setAnimationByName("jump", false); + pixie.state.addAnimationByName("running", true); } diff --git a/examples/example 12 - Spine/pixi.js b/examples/example 12 - Spine/pixi.js index 68e2e69..c7005f9 100644 --- a/examples/example 12 - Spine/pixi.js +++ b/examples/example 12 - Spine/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-11 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -929,6 +929,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text = function(text, style) { @@ -956,6 +958,8 @@ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param {Boolean} [style.wordWrap=false] Indicates if word wrap should be used + * @param {Number} [style.wordWrapWidth=100] The width at which text will wrap */ PIXI.Text.prototype.setStyle = function(style) { @@ -964,6 +968,8 @@ style.fill = style.fill || "black"; style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; this.style = style; this.dirty = true; }; @@ -976,7 +982,6 @@ PIXI.Sprite.prototype.setText = function(text) { this.text = text.toString() || " "; - this.dirty = true; }; @@ -987,9 +992,15 @@ PIXI.Text.prototype.updateText = function() { this.context.font = this.style.font; + + var outputText = this.text; + + // word wrap + // preserve original text + if(this.style.wordWrap)outputText = this.wordWrap(this.text); //split text into lines - var lines = this.text.split(/(?:\r\n|\r|\n)/); + var lines = outputText.split(/(?:\r\n|\r|\n)/); //calculate text width var lineWidths = []; @@ -1103,6 +1114,57 @@ return result; }; +/** + * A Text Object will apply wordwrap + * @private + */ +PIXI.Text.prototype.wordWrap = function(text) +{ + // search good wrap position + var searchWrapPos = function(ctx, text, start, end, wrapWidth) + { + var p = Math.floor((end-start) / 2) + start; + if(p == start) { + return 1; + } + + if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) + { + if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) + { + return p; + } + else + { + return arguments.callee(ctx, text, p, end, wrapWidth); + } + } + else + { + return arguments.callee(ctx, text, start, p, wrapWidth); + } + }; + + var lineWrap = function(ctx, text, wrapWidth) + { + if(ctx.measureText(text).width <= wrapWidth || text.length < 1) + { + return text; + } + var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); + return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); + }; + + var result = ""; + var lines = text.split("\n"); + for (var i = 0; i < lines.length; i++) + { + result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; + } + + return result; +}; + PIXI.Text.prototype.destroy = function(destroyTexture) { if(destroyTexture) @@ -2437,7 +2499,7 @@ PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:true + premultipliedAlpha:false }); } catch (e) @@ -2580,7 +2642,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, null); - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent); + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); @@ -3592,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 2028846..c7005f9 100755 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/examples/example 9 - Tiling Texture/pixi.js b/examples/example 9 - Tiling Texture/pixi.js index 2028846..c7005f9 100644 --- a/examples/example 9 - Tiling Texture/pixi.js +++ b/examples/example 9 - Tiling Texture/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-06-07 + * Compiled: 2013-06-12 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -1916,6 +1916,8 @@ this.setBackgroundColor(backgroundColor); this.worldVisible = true; + + this.stage.dirty = true; } // constructor @@ -3233,7 +3235,6 @@ tx = worldTransform[2]; ty = worldTransform[5]; - this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 1 ] = d * h1 + b * w1 + ty; @@ -3319,6 +3320,7 @@ { this.refresh(); this.dirty = false; + } if (this.size == 0)return; @@ -3652,8 +3654,9 @@ child.textureChange = false; if(child.worldVisible) { - this.removeDisplayObject(child) - this.addDisplayObject(child) + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! } @@ -3665,6 +3668,106 @@ }; } +PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) +{ + // we know this exists.. + // is it in a batch.. + // check batch length + if(displayObject.batch.length == 1) + { + // just one! this guy! so simply swap the texture + displayObject.batch.texture = displayObject.texture.baseTexture; + return; + } + + // early out! + if(displayObject.batch.texture == displayObject.texture.baseTexture)return; + + + if(displayObject.batch.head == displayObject) + { + //console.log("HEAD") + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var previousBatch = this.batchs[index-1]; + currentBatch.remove(displayObject); + + if(previousBatch) + { + if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + { + previousBatch.insertAfter(displayObject, previousBatch.tail); + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index-1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(0, 0, batch); + } + + } + else if(displayObject.batch.tail == displayObject) + { + var currentBatch = displayObject.batch; + + var index = this.batchs.indexOf( currentBatch ); + var nextBatch = this.batchs[index+1]; + currentBatch.remove(displayObject); + + if(nextBatch) + { + if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + { + nextBatch.insertBefore(displayObject, nextBatch.head); + return; + } + else + { + // add it before.. + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch); + } + + } + else + { + // we are 0! + var batch = PIXI.WebGLRenderer.getBatch(); + batch.init(displayObject); + this.batchs.push(batch); + } + } + else + { + // console.log("MIDDLE") + var currentBatch = displayObject.batch; + + // split the batch into 2 + // AH! dont split on the current display object as the texture is wrong! + var splitBatch = currentBatch.split(displayObject); + + // now remove the display object + splitBatch.remove(displayObject); + + var batch = PIXI.WebGLRenderer.getBatch(); + var index = this.batchs.indexOf( currentBatch ); + batch.init(displayObject); + this.batchs.splice(index+1, 0, batch, splitBatch); + } +} + PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject) { // add a child to the render group.. @@ -4852,6 +4955,1453 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * A class that enables the you to import and run your spine animations in pixi. + * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class + * Also due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the spine anim file to be used + */ +PIXI.Spine = function(url) +{ + PIXI.DisplayObjectContainer.call(this); + + this.spineData = PIXI.AnimCache[url]; + + if(!this.spineData) + { + throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url); + return; + } + + this.count = 0; + + this.sprites = []; + + this.skeleton = new spine.Skeleton(this.spineData); + this.skeleton.updateWorldTransform(); + + this.stateData = new spine.AnimationStateData(this.spineData); + this.state = new spine.AnimationState(this.stateData); + + // add the sprites.. + for (var i = 0; i < this.skeleton.drawOrder.length; i++) { + + var attachmentName = this.skeleton.drawOrder[i].data.attachmentName; + + // kind of an assumtion here. that its a png + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + + var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(attachmentName)); + sprite.anchor.x = sprite.anchor.y = 0.5; + this.addChild(sprite); + this.sprites.push(sprite); + }; +} + +PIXI.Spine.constructor = PIXI.Spine; +PIXI.Spine.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); +PIXI.Spine.prototype.updateTransform = function() +{ + // TODO should make this time based really.. + this.state.update(1/60); + this.state.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + + + for (var i = 0; i < this.skeleton.drawOrder.length; i++) + { + var slot = this.skeleton.drawOrder[i]; + + var x = slot.bone.worldX + slot.attachment.x * slot.bone.m00 + slot.attachment.y * slot.bone.m01 + slot.attachment.width * 0.5; + var y = slot.bone.worldY + slot.attachment.x * slot.bone.m10 + slot.attachment.y * slot.bone.m11 + slot.attachment.height * 0.5; + //console.log(x + ' : ' + y); + + + //console.log(slot.attachment.name) + if(slot.cacheName != slot.attachment.name) + { + var attachmentName = slot.attachment.name; + + if(!PIXI.TextureCache[attachmentName]) + { + attachmentName += ".png"; + } + + this.sprites[i].setTexture(PIXI.TextureCache[attachmentName]); + + slot.cacheName = slot.attachment.name; + } + + x += -((slot.attachment.width * (slot.bone.worldScaleX + slot.attachment.scaleX - 1))>>1); + y += -((slot.attachment.height * (slot.bone.worldScaleY + slot.attachment.scaleY - 1))>>1); + + + this.sprites[i].position.x = x; + this.sprites[i].position.y = y; + this.sprites[i].rotation = (-(slot.bone.worldRotation + slot.attachment.rotation)) * (Math.PI/180); + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +} + +/* + * Awesome JS run time provided by EsotericSoftware + * + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +var spine = {}; + +spine.BoneData = function (name, parent) { + this.name = name; + this.parent = parent; +}; +spine.BoneData.prototype = { + length: 0, + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1 +}; + +spine.SlotData = function (name, boneData) { + this.name = name; + this.boneData = boneData; +}; +spine.SlotData.prototype = { + r: 1, g: 1, b: 1, a: 1, + attachmentName: null +}; + +spine.Bone = function (boneData, parent) { + this.data = boneData; + this.parent = parent; + this.setToSetupPose(); +}; +spine.Bone.yDown = false; +spine.Bone.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + m00: 0, m01: 0, worldX: 0, // a b x + m10: 0, m11: 0, worldY: 0, // c d y + worldRotation: 0, + worldScaleX: 1, worldScaleY: 1, + updateWorldTransform: function (flipX, flipY) { + var parent = this.parent; + if (parent != null) { + this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX; + this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY; + this.worldScaleX = parent.worldScaleX * this.scaleX; + this.worldScaleY = parent.worldScaleY * this.scaleY; + this.worldRotation = parent.worldRotation + this.rotation; + } else { + this.worldX = this.x; + this.worldY = this.y; + this.worldScaleX = this.scaleX; + this.worldScaleY = this.scaleY; + this.worldRotation = this.rotation; + } + var radians = this.worldRotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + this.m00 = cos * this.worldScaleX; + this.m10 = sin * this.worldScaleX; + this.m01 = -sin * this.worldScaleY; + this.m11 = cos * this.worldScaleY; + if (flipX) { + this.m00 = -this.m00; + this.m01 = -this.m01; + } + if (flipY) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + if (spine.Bone.yDown) { + this.m10 = -this.m10; + this.m11 = -this.m11; + } + }, + setToSetupPose: function () { + var data = this.data; + this.x = data.x; + this.y = data.y; + this.rotation = data.rotation; + this.scaleX = data.scaleX; + this.scaleY = data.scaleY; + } +}; + +spine.Slot = function (slotData, skeleton, bone) { + this.data = slotData; + this.skeleton = skeleton; + this.bone = bone; + this.setToSetupPose(); +}; +spine.Slot.prototype = { + r: 1, g: 1, b: 1, a: 1, + _attachmentTime: 0, + attachment: null, + setAttachment: function (attachment) { + this.attachment = attachment; + this._attachmentTime = this.skeleton.time; + }, + setAttachmentTime: function (time) { + this._attachmentTime = this.skeleton.time - time; + }, + getAttachmentTime: function () { + return this.skeleton.time - this._attachmentTime; + }, + setToSetupPose: function () { + var data = this.data; + this.r = data.r; + this.g = data.g; + this.b = data.b; + this.a = data.a; + + var slotDatas = this.skeleton.data.slots; + for (var i = 0, n = slotDatas.length; i < n; i++) { + if (slotDatas[i] == data) { + this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName)); + break; + } + } + } +}; + +spine.Skin = function (name) { + this.name = name; + this.attachments = {}; +}; +spine.Skin.prototype = { + addAttachment: function (slotIndex, name, attachment) { + this.attachments[slotIndex + ":" + name] = attachment; + }, + getAttachment: function (slotIndex, name) { + return this.attachments[slotIndex + ":" + name]; + }, + _attachAll: function (skeleton, oldSkin) { + for (var key in oldSkin.attachments) { + var colon = key.indexOf(":"); + var slotIndex = parseInt(key.substring(0, colon)); + var name = key.substring(colon + 1); + var slot = skeleton.slots[slotIndex]; + if (slot.attachment && slot.attachment.name == name) { + var attachment = this.getAttachment(slotIndex, name); + if (attachment) slot.setAttachment(attachment); + } + } + } +}; + +spine.Animation = function (name, timelines, duration) { + this.name = name; + this.timelines = timelines; + this.duration = duration; +}; +spine.Animation.prototype = { + apply: function (skeleton, time, loop) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, 1); + }, + mix: function (skeleton, time, loop, alpha) { + if (loop && this.duration != 0) time %= this.duration; + var timelines = this.timelines; + for (var i = 0, n = timelines.length; i < n; i++) + timelines[i].apply(skeleton, time, alpha); + } +}; + +spine.binarySearch = function (values, target, step) { + var low = 0; + var high = Math.floor(values.length / step) - 2; + if (high == 0) return step; + var current = high >>> 1; + while (true) { + if (values[(current + 1) * step] <= target) + low = current + 1; + else + high = current; + if (low == high) return (low + 1) * step; + current = (low + high) >>> 1; + } +}; +spine.linearSearch = function (values, target, step) { + for (var i = 0, last = values.length - step; i <= last; i += step) + if (values[i] > target) return i; + return -1; +}; + +spine.Curves = function (frameCount) { + this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ... + this.curves.length = (frameCount - 1) * 6; +}; +spine.Curves.prototype = { + setLinear: function (frameIndex) { + this.curves[frameIndex * 6] = 0/*LINEAR*/; + }, + setStepped: function (frameIndex) { + this.curves[frameIndex * 6] = -1/*STEPPED*/; + }, + /** 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 + * the difference between the keyframe's values. */ + setCurve: function (frameIndex, cx1, cy1, cx2, cy2) { + var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/; + var subdiv_step2 = subdiv_step * subdiv_step; + var subdiv_step3 = subdiv_step2 * subdiv_step; + var pre1 = 3 * subdiv_step; + var pre2 = 3 * subdiv_step2; + var pre4 = 6 * subdiv_step2; + var pre5 = 6 * subdiv_step3; + var tmp1x = -cx1 * 2 + cx2; + 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; + curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3; + 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 i = 10/*BEZIER_SEGMENTS*/ - 2; + while (true) { + if (x >= percent) { + var lastX = x - dfx; + var lastY = y - dfy; + return lastY + (y - lastY) * (percent - lastX) / (x - lastX); + } + if (i == 0) break; + i--; + dfx += ddfx; + dfy += ddfy; + ddfx += dddfx; + ddfy += dddfy; + x += dfx; + y += dfy; + } + return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1. + } +}; + +spine.RotateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, angle, ... + this.frames.length = frameCount * 2; +}; +spine.RotateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, angle) { + frameIndex *= 2; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = angle; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 2]) { // Time is after last frame. + var amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 2); + var lastFrameValue = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent); + + var amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation; + while (amount > 180) + amount -= 360; + while (amount < -180) + amount += 360; + bone.rotation += amount * alpha; + } +}; + +spine.TranslateTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.TranslateTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha; + bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + 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.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha; + } +}; + +spine.ScaleTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, x, y, ... + this.frames.length = frameCount * 3; +}; +spine.ScaleTimeline.prototype = { + boneIndex: 0, + getFrameCount: function () { + return this.frames.length / 3; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 3; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = x; + this.frames[frameIndex + 2] = y; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var bone = skeleton.bones[this.boneIndex]; + + if (time >= frames[frames.length - 3]) { // Time is after last frame. + bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha; + + + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 3); + var lastFrameX = frames[frameIndex - 2]; + var lastFrameY = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent); + + bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha; + bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha; + } +}; + +spine.ColorTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, r, g, b, a, ... + this.frames.length = frameCount * 5; +}; +spine.ColorTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, x, y) { + frameIndex *= 5; + this.frames[frameIndex] = time; + this.frames[frameIndex + 1] = r; + this.frames[frameIndex + 2] = g; + this.frames[frameIndex + 3] = b; + this.frames[frameIndex + 4] = a; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + var slot = skeleton.slots[this.slotIndex]; + + if (time >= frames[frames.length - 5]) { // Time is after last frame. + var i = frames.length - 1; + slot.r = frames[i - 3]; + slot.g = frames[i - 2]; + slot.b = frames[i - 1]; + slot.a = frames[i]; + return; + } + + // Interpolate between the last frame and the current frame. + var frameIndex = spine.binarySearch(frames, time, 5); + var lastFrameR = frames[frameIndex - 4]; + var lastFrameG = frames[frameIndex - 3]; + var lastFrameB = frames[frameIndex - 2]; + var lastFrameA = frames[frameIndex - 1]; + var frameTime = frames[frameIndex]; + var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime); + percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent); + + var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent; + var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent; + var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent; + var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent; + if (alpha < 1) { + slot.r += (r - slot.r) * alpha; + slot.g += (g - slot.g) * alpha; + slot.b += (b - slot.b) * alpha; + slot.a += (a - slot.a) * alpha; + } else { + slot.r = r; + slot.g = g; + slot.b = b; + slot.a = a; + } + } +}; + +spine.AttachmentTimeline = function (frameCount) { + this.curves = new spine.Curves(frameCount); + this.frames = []; // time, ... + this.frames.length = frameCount; + this.attachmentNames = []; // time, ... + this.attachmentNames.length = frameCount; +}; +spine.AttachmentTimeline.prototype = { + slotIndex: 0, + getFrameCount: function () { + return this.frames.length / 2; + }, + setFrame: function (frameIndex, time, attachmentName) { + this.frames[frameIndex] = time; + this.attachmentNames[frameIndex] = attachmentName; + }, + apply: function (skeleton, time, alpha) { + var frames = this.frames; + if (time < frames[0]) return; // Time is before first frame. + + var frameIndex; + if (time >= frames[frames.length - 1]) // Time is after last frame. + frameIndex = frames.length - 1; + else + frameIndex = spine.binarySearch(frames, time, 1) - 1; + + var attachmentName = this.attachmentNames[frameIndex]; + //console.log(skeleton.slots[this.slotIndex]) + + // change the name! + // skeleton.slots[this.slotIndex].attachmentName = attachmentName; + + skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName)); + } +}; + +spine.SkeletonData = function () { + this.bones = []; + this.slots = []; + this.skins = []; + this.animations = []; +}; +spine.SkeletonData.prototype = { + defaultSkin: null, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) { + if (slots[i].name == slotName) return slot[i]; + } + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].name == slotName) return i; + return -1; + }, + /** @return May be null. */ + findSkin: function (skinName) { + var skins = this.skins; + for (var i = 0, n = skins.length; i < n; i++) + if (skins[i].name == skinName) return skins[i]; + return null; + }, + /** @return May be null. */ + findAnimation: function (animationName) { + var animations = this.animations; + for (var i = 0, n = animations.length; i < n; i++) + if (animations[i].name == animationName) return animations[i]; + return null; + } +}; + +spine.Skeleton = function (skeletonData) { + this.data = skeletonData; + + this.bones = []; + for (var i = 0, n = skeletonData.bones.length; i < n; i++) { + var boneData = skeletonData.bones[i]; + var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)]; + this.bones.push(new spine.Bone(boneData, parent)); + } + + this.slots = []; + this.drawOrder = []; + for (var i = 0, n = skeletonData.slots.length; i < n; i++) { + var slotData = skeletonData.slots[i]; + var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)]; + var slot = new spine.Slot(slotData, this, bone); + this.slots.push(slot); + this.drawOrder.push(slot); + } +}; +spine.Skeleton.prototype = { + x: 0, y: 0, + skin: null, + r: 1, g: 1, b: 1, a: 1, + time: 0, + flipX: false, flipY: false, + /** Updates the world transform for each bone. */ + updateWorldTransform: function () { + var flipX = this.flipX; + var flipY = this.flipY; + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].updateWorldTransform(flipX, flipY); + }, + /** Sets the bones and slots to their setup pose values. */ + setToSetupPose: function () { + this.setBonesToSetupPose(); + this.setSlotsToSetupPose(); + }, + setBonesToSetupPose: function () { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + bones[i].setToSetupPose(); + }, + setSlotsToSetupPose: function () { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + slots[i].setToSetupPose(i); + }, + /** @return May return null. */ + getRootBone: function () { + return this.bones.length == 0 ? null : this.bones[0]; + }, + /** @return May be null. */ + findBone: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return bones[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findBoneIndex: function (boneName) { + var bones = this.bones; + for (var i = 0, n = bones.length; i < n; i++) + if (bones[i].data.name == boneName) return i; + return -1; + }, + /** @return May be null. */ + findSlot: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return slots[i]; + return null; + }, + /** @return -1 if the bone was not found. */ + findSlotIndex: function (slotName) { + var slots = this.slots; + for (var i = 0, n = slots.length; i < n; i++) + if (slots[i].data.name == slotName) return i; + return -1; + }, + setSkinByName: function (skinName) { + var skin = this.data.findSkin(skinName); + if (!skin) throw "Skin not found: " + skinName; + this.setSkin(skin); + }, + /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments + * from the new skin are attached if the corresponding attachment from the old skin was attached. + * @param newSkin May be null. */ + setSkin: function (newSkin) { + if (this.skin && newSkin) newSkin._attachAll(this, this.skin); + this.skin = newSkin; + }, + /** @return May be null. */ + getAttachmentBySlotName: function (slotName, attachmentName) { + return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName); + }, + /** @return May be null. */ + getAttachmentBySlotIndex: function (slotIndex, attachmentName) { + if (this.skin) { + var attachment = this.skin.getAttachment(slotIndex, attachmentName); + if (attachment) return attachment; + } + if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName); + return null; + }, + /** @param attachmentName May be null. */ + setAttachment: function (slotName, attachmentName) { + var slots = this.slots; + for (var i = 0, n = slots.size; i < n; i++) { + var slot = slots[i]; + if (slot.data.name == slotName) { + var attachment = null; + if (attachmentName) { + + attachment = this.getAttachment(i, attachmentName); + if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName; + } + + slot.setAttachment(attachment); + return; + } + } + throw "Slot not found: " + slotName; + }, + update: function (delta) { + time += delta; + } +}; + +spine.AttachmentType = { + region: 0 +}; + +spine.RegionAttachment = function () { + this.offset = []; + this.offset.length = 8; + this.uvs = []; + this.uvs.length = 8; +}; +spine.RegionAttachment.prototype = { + x: 0, y: 0, + rotation: 0, + scaleX: 1, scaleY: 1, + width: 0, height: 0, + rendererObject: null, + regionOffsetX: 0, regionOffsetY: 0, + regionWidth: 0, regionHeight: 0, + regionOriginalWidth: 0, regionOriginalHeight: 0, + setUVs: function (u, v, u2, v2, rotate) { + var uvs = this.uvs; + if (rotate) { + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v2; + uvs[4/*X3*/] = u; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v; + uvs[0/*X1*/] = u2; + uvs[1/*Y1*/] = v2; + } else { + uvs[0/*X1*/] = u; + uvs[1/*Y1*/] = v2; + uvs[2/*X2*/] = u; + uvs[3/*Y2*/] = v; + uvs[4/*X3*/] = u2; + uvs[5/*Y3*/] = v; + uvs[6/*X4*/] = u2; + uvs[7/*Y4*/] = v2; + } + }, + updateOffset: function () { + var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX; + var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY; + var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX; + var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY; + var localX2 = localX + this.regionWidth * regionScaleX; + var localY2 = localY + this.regionHeight * regionScaleY; + var radians = this.rotation * Math.PI / 180; + var cos = Math.cos(radians); + var sin = Math.sin(radians); + var localXCos = localX * cos + this.x; + var localXSin = localX * sin; + var localYCos = localY * cos + this.y; + var localYSin = localY * sin; + var localX2Cos = localX2 * cos + this.x; + var localX2Sin = localX2 * sin; + var localY2Cos = localY2 * cos + this.y; + var localY2Sin = localY2 * sin; + var offset = this.offset; + offset[0/*X1*/] = localXCos - localYSin; + offset[1/*Y1*/] = localYCos + localXSin; + offset[2/*X2*/] = localXCos - localY2Sin; + offset[3/*Y2*/] = localY2Cos + localXSin; + offset[4/*X3*/] = localX2Cos - localY2Sin; + offset[5/*Y3*/] = localY2Cos + localX2Sin; + offset[6/*X4*/] = localX2Cos - localYSin; + offset[7/*Y4*/] = localYCos + localX2Sin; + }, + computeVertices: function (x, y, bone, vertices) { + + x += bone.worldX; + y += bone.worldY; + var m00 = bone.m00; + var m01 = bone.m01; + var m10 = bone.m10; + var m11 = bone.m11; + var offset = this.offset; + vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x; + vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y; + vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x; + vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y; + vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x; + vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y; + vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x; + vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y; + } +} + +spine.AnimationStateData = function (skeletonData) { + this.skeletonData = skeletonData; + this.animationToMixTime = {}; +}; +spine.AnimationStateData.prototype = { + setMixByName: function (fromName, toName, duration) { + var from = this.skeletonData.findAnimation(fromName); + if (!from) throw "Animation not found: " + fromName; + var to = this.skeletonData.findAnimation(toName); + if (!to) throw "Animation not found: " + toName; + this.setMix(from, to, duration); + }, + setMix: function (from, to, duration) { + this.animationToMixTime[from.name + ":" + to.name] = duration; + }, + getMix: function (from, to) { + var time = this.animationToMixTime[from.name + ":" + to.name]; + return time ? time : 0; + } +}; + +spine.AnimationState = function (stateData) { + this.data = stateData; + this.queue = []; +}; +spine.AnimationState.prototype = { + current: null, + previous: null, + currentTime: 0, + previousTime: 0, + currentLoop: false, + previousLoop: false, + mixTime: 0, + mixDuration: 0, + update: function (delta) { + this.currentTime += delta; + this.previousTime += delta; + this.mixTime += delta; + + if (this.queue.length > 0) { + var entry = this.queue[0]; + if (this.currentTime >= entry.delay) { + this._setAnimation(entry.animation, entry.loop); + this.queue.shift(); + } + } + }, + apply: function (skeleton) { + if (!this.current) return; + if (this.previous) { + this.previous.apply(skeleton, this.previousTime, this.previousLoop); + var alpha = this.mixTime / this.mixDuration; + if (alpha >= 1) { + alpha = 1; + this.previous = null; + } + this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha); + } else + this.current.apply(skeleton, this.currentTime, this.currentLoop); + }, + clearAnimation: function () { + this.previous = null; + this.current = null; + this.queue.length = 0; + }, + _setAnimation: function (animation, loop) { + this.previous = null; + if (animation && this.current) { + this.mixDuration = this.data.getMix(this.current, animation); + if (this.mixDuration > 0) { + this.mixTime = 0; + this.previous = this.current; + this.previousTime = this.currentTime; + this.previousLoop = this.currentLoop; + } + } + this.current = animation; + this.currentLoop = loop; + this.currentTime = 0; + }, + /** @see #setAnimation(Animation, Boolean) */ + setAnimationByName: function (animationName, loop) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.setAnimation(animation, loop); + }, + /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0. + * @param animation May be null. */ + setAnimation: function (animation, loop) { + this.queue.length = 0; + this._setAnimation(animation, loop); + }, + /** @see #addAnimation(Animation, Boolean, Number) */ + addAnimationByName: function (animationName, loop, delay) { + var animation = this.data.skeletonData.findAnimation(animationName); + if (!animation) throw "Animation not found: " + animationName; + this.addAnimation(animation, loop, delay); + }, + /** Adds an animation to be played delay seconds after the current or last queued animation. + * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */ + addAnimation: function (animation, loop, delay) { + var entry = {}; + entry.animation = animation; + entry.loop = loop; + + if (!delay || delay <= 0) { + var previousAnimation = this.queue.length == 0 ? this.current : this.queue[this.queue.length - 1].animation; + if (previousAnimation != null) + delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0); + else + delay = 0; + } + entry.delay = delay; + + this.queue.push(entry); + }, + /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */ + isComplete: function () { + return !this.current || this.currentTime >= this.current.duration; + } +}; + +spine.SkeletonJson = function (attachmentLoader) { + this.attachmentLoader = attachmentLoader; +}; +spine.SkeletonJson.prototype = { + scale: 1, + readSkeletonData: function (root) { + var skeletonData = new spine.SkeletonData(); + + // Bones. + var bones = root["bones"]; + for (var i = 0, n = bones.length; i < n; i++) { + var boneMap = bones[i]; + var parent = null; + if (boneMap["parent"]) { + parent = skeletonData.findBone(boneMap["parent"]); + if (!parent) throw "Parent bone not found: " + boneMap["parent"]; + } + var boneData = new spine.BoneData(boneMap["name"], parent); + boneData.length = (boneMap["length"] || 0) * this.scale; + boneData.x = (boneMap["x"] || 0) * this.scale; + boneData.y = (boneMap["y"] || 0) * this.scale; + boneData.rotation = (boneMap["rotation"] || 0); + boneData.scaleX = boneMap["scaleX"] || 1; + boneData.scaleY = boneMap["scaleY"] || 1; + skeletonData.bones.push(boneData); + } + + // Slots. + var slots = root["slots"]; + for (var i = 0, n = slots.length; i < n; i++) { + var slotMap = slots[i]; + var boneData = skeletonData.findBone(slotMap["bone"]); + if (!boneData) throw "Slot bone not found: " + slotMap["bone"]; + var slotData = new spine.SlotData(slotMap["name"], boneData); + + var color = slotMap["color"]; + if (color) { + slotData.r = spine.SkeletonJson.toColor(color, 0); + slotData.g = spine.SkeletonJson.toColor(color, 1); + slotData.b = spine.SkeletonJson.toColor(color, 2); + slotData.a = spine.SkeletonJson.toColor(color, 3); + } + + slotData.attachmentName = slotMap["attachment"]; + + skeletonData.slots.push(slotData); + } + + // Skins. + var skins = root["skins"]; + for (var skinName in skins) { + if (!skins.hasOwnProperty(skinName)) continue; + var skinMap = skins[skinName]; + var skin = new spine.Skin(skinName); + for (var slotName in skinMap) { + if (!skinMap.hasOwnProperty(slotName)) continue; + var slotIndex = skeletonData.findSlotIndex(slotName); + var slotEntry = skinMap[slotName]; + for (var attachmentName in slotEntry) { + if (!slotEntry.hasOwnProperty(attachmentName)) continue; + var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]); + if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment); + } + } + skeletonData.skins.push(skin); + if (skin.name == "default") skeletonData.defaultSkin = skin; + } + + // Animations. + var animations = root["animations"]; + for (var animationName in animations) { + if (!animations.hasOwnProperty(animationName)) continue; + this.readAnimation(animationName, animations[animationName], skeletonData); + } + + return skeletonData; + }, + readAttachment: function (skin, name, map) { + name = map["name"] || name; + + var type = spine.AttachmentType[map["type"] || "region"]; + + // @ekelokorpi + // var attachment = this.attachmentLoader.newAttachment(skin, type, name); + var attachment = new spine.RegionAttachment(); + + // @Doormat23 + // add the name of the attachment + attachment.name = name; + + if (type == spine.AttachmentType.region) { + attachment.x = (map["x"] || 0) * this.scale; + attachment.y = (map["y"] || 0) * this.scale; + attachment.scaleX = map["scaleX"] || 1; + attachment.scaleY = map["scaleY"] || 1; + attachment.rotation = map["rotation"] || 0; + attachment.width = (map["width"] || 32) * this.scale; + attachment.height = (map["height"] || 32) * this.scale; + attachment.updateOffset(); + } + + return attachment; + }, + readAnimation: function (name, map, skeletonData) { + var timelines = []; + var duration = 0; + + var bones = map["bones"]; + for (var boneName in bones) { + if (!bones.hasOwnProperty(boneName)) continue; + var boneIndex = skeletonData.findBoneIndex(boneName); + if (boneIndex == -1) throw "Bone not found: " + boneName; + var boneMap = bones[boneName]; + + for (var timelineName in boneMap) { + if (!boneMap.hasOwnProperty(timelineName)) continue; + var values = boneMap[timelineName]; + if (timelineName == "rotate") { + var timeline = new spine.RotateTimeline(values.length); + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]); + + } else if (timelineName == "translate" || timelineName == "scale") { + var timeline; + var timelineScale = 1; + if (timelineName == "scale") + timeline = new spine.ScaleTimeline(values.length); + else { + timeline = new spine.TranslateTimeline(values.length); + timelineScale = this.scale; + } + timeline.boneIndex = boneIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var x = (valueMap["x"] || 0) * timelineScale; + var y = (valueMap["y"] || 0) * timelineScale; + timeline.setFrame(frameIndex, valueMap["time"], x, y); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]); + + } else + throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")"; + } + } + var slots = map["slots"]; + for (var slotName in slots) { + if (!slots.hasOwnProperty(slotName)) continue; + var slotMap = slots[slotName]; + var slotIndex = skeletonData.findSlotIndex(slotName); + + for (var timelineName in slotMap) { + if (!slotMap.hasOwnProperty(timelineName)) continue; + var values = slotMap[timelineName]; + if (timelineName == "color") { + var timeline = new spine.ColorTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + var color = valueMap["color"]; + var r = spine.SkeletonJson.toColor(color, 0); + var g = spine.SkeletonJson.toColor(color, 1); + var b = spine.SkeletonJson.toColor(color, 2); + var a = spine.SkeletonJson.toColor(color, 3); + timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a); + spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap); + frameIndex++; + } + timelines.push(timeline); + duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]); + + } else if (timelineName == "attachment") { + var timeline = new spine.AttachmentTimeline(values.length); + timeline.slotIndex = slotIndex; + + var frameIndex = 0; + for (var i = 0, n = values.length; i < n; i++) { + var valueMap = values[i]; + timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]); + } + timelines.push(timeline); + // PIXI FIX + duration = Math.max(duration, timeline.frames[Math.floor(timeline.getFrameCount()) - 1]); + } else + throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")"; + } + } + skeletonData.animations.push(new spine.Animation(name, timelines, duration)); + } +}; +spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) { + var curve = valueMap["curve"]; + if (!curve) return; + if (curve == "stepped") + timeline.curves.setStepped(frameIndex); + else if (curve instanceof Array) + timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]); +}; +spine.SkeletonJson.toColor = function (hexString, colorIndex) { + if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString; + return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255; +}; + +spine.Atlas = function (atlasText, textureLoader) { + this.textureLoader = textureLoader; + this.pages = []; + this.regions = []; + + var reader = new spine.AtlasReader(atlasText); + var tuple = []; + tuple.length = 4; + var page = null; + while (true) { + var line = reader.readLine(); + if (line == null) break; + line = reader.trim(line); + if (line.length == 0) + page = null; + else if (!page) { + page = new spine.AtlasPage(); + page.name = line; + + page.format = spine.Atlas.Format[reader.readValue()]; + + reader.readTuple(tuple); + page.minFilter = spine.Atlas.TextureFilter[tuple[0]]; + page.magFilter = spine.Atlas.TextureFilter[tuple[1]]; + + var direction = reader.readValue(); + page.uWrap = spine.Atlas.TextureWrap.clampToEdge; + page.vWrap = spine.Atlas.TextureWrap.clampToEdge; + if (direction == "x") + page.uWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "y") + page.vWrap = spine.Atlas.TextureWrap.repeat; + else if (direction == "xy") + page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat; + + textureLoader.load(page, line); + + this.pages.push(page); + + } else { + var region = new spine.AtlasRegion(); + region.name = line; + region.page = page; + + region.rotate = reader.readValue() == "true"; + + reader.readTuple(tuple); + var x = parseInt(tuple[0]); + var y = parseInt(tuple[1]); + + reader.readTuple(tuple); + var width = parseInt(tuple[0]); + var height = parseInt(tuple[1]); + + region.u = x / page.width; + region.v = y / page.height; + if (region.rotate) { + region.u2 = (x + height) / page.width; + region.v2 = (y + width) / page.height; + } else { + region.u2 = (x + width) / page.width; + region.v2 = (y + height) / page.height; + } + region.x = x; + region.y = y; + region.width = Math.abs(width); + region.height = Math.abs(height); + + if (reader.readTuple(tuple) == 4) { // split is optional + region.splits = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits + region.pads = [parseInt(tuple[0]), parseInt(tuple[1]), parseInt(tuple[2]), parseInt(tuple[3])]; + + reader.readTuple(tuple); + } + } + + region.originalWidth = parseInt(tuple[0]); + region.originalHeight = parseInt(tuple[1]); + + reader.readTuple(tuple); + region.offsetX = parseInt(tuple[0]); + region.offsetY = parseInt(tuple[1]); + + region.index = parseInt(reader.readValue()); + + this.regions.push(region); + } + } +}; +spine.Atlas.prototype = { + findRegion: function (name) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) + if (regions[i].name == name) return regions[i]; + return null; + }, + dispose: function () { + var pages = this.pages; + for (var i = 0, n = pages.length; i < n; i++) + this.textureLoader.unload(pages[i].rendererObject); + }, + updateUVs: function (page) { + var regions = this.regions; + for (var i = 0, n = regions.length; i < n; i++) { + var region = regions[i]; + if (region.page != page) continue; + region.u = region.x / page.width; + region.v = region.y / page.height; + if (region.rotate) { + region.u2 = (region.x + region.height) / page.width; + region.v2 = (region.y + region.width) / page.height; + } else { + region.u2 = (region.x + region.width) / page.width; + region.v2 = (region.y + region.height) / page.height; + } + } + } +}; + +spine.Atlas.Format = { + alpha: 0, + intensity: 1, + luminanceAlpha: 2, + rgb565: 3, + rgba4444: 4, + rgb888: 5, + rgba8888: 6 +}; + +spine.Atlas.TextureFilter = { + nearest: 0, + linear: 1, + mipMap: 2, + mipMapNearestNearest: 3, + mipMapLinearNearest: 4, + mipMapNearestLinear: 5, + mipMapLinearLinear: 6 +}; + +spine.Atlas.TextureWrap = { + mirroredRepeat: 0, + clampToEdge: 1, + repeat: 2 +}; + +spine.AtlasPage = function () {}; +spine.AtlasPage.prototype = { + name: null, + format: null, + minFilter: null, + magFilter: null, + uWrap: null, + vWrap: null, + rendererObject: null, + width: 0, + height: 0 +}; + +spine.AtlasRegion = function () {}; +spine.AtlasRegion.prototype = { + page: null, + name: null, + x: 0, y: 0, + width: 0, height: 0, + u: 0, v: 0, u2: 0, v2: 0, + offsetX: 0, offsetY: 0, + originalWidth: 0, originalHeight: 0, + index: 0, + rotate: false, + splits: null, + pads: null, +}; + +spine.AtlasReader = function (text) { + this.lines = text.split(/\r\n|\r|\n/); +}; +spine.AtlasReader.prototype = { + index: 0, + trim: function (value) { + return value.replace(/^\s+|\s+$/g, ""); + }, + readLine: function () { + if (this.index >= this.lines.length) return null; + return this.lines[this.index++]; + }, + readValue: function () { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + return this.trim(line.substring(colon + 1)); + }, + /** Returns the number of tuple values read (2 or 4). */ + readTuple: function (tuple) { + var line = this.readLine(); + var colon = line.indexOf(":"); + if (colon == -1) throw "Invalid line: " + line; + var i = 0, lastMatch= colon + 1; + for (; i < 3; i++) { + var comma = line.indexOf(",", lastMatch); + if (comma == -1) { + if (i == 0) throw "Invalid line: " + line; + break; + } + tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch)); + lastMatch = comma + 1; + } + tuple[i] = this.trim(line.substring(lastMatch)); + return i + 1; + } +} + +spine.AtlasAttachmentLoader = function (atlas) { + this.atlas = atlas; +} +spine.AtlasAttachmentLoader.prototype = { + newAttachment: function (skin, type, name) { + switch (type) { + case spine.AttachmentType.region: + var region = this.atlas.findRegion(name); + if (!region) throw "Region not found in atlas: " + name + " (" + type + ")"; + var attachment = new spine.RegionAttachment(name); + attachment.rendererObject = region; + attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate); + attachment.regionOffsetX = region.offsetX; + attachment.regionOffsetY = region.offsetY; + attachment.regionWidth = region.width; + attachment.regionHeight = region.height; + attachment.regionOriginalWidth = region.originalWidth; + attachment.regionOriginalHeight = region.originalHeight; + return attachment; + } + throw "Unknown attachment type: " + type; + } +} + +PIXI.AnimCache = {}; +spine.Bone.yDown = true; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5400,10 +6950,13 @@ "jpeg": PIXI.ImageLoader, "png": PIXI.ImageLoader, "gif": PIXI.ImageLoader, - "json": PIXI.SpriteSheetLoader, + "json": PIXI.JsonLoader, + "anim": PIXI.SpineLoader, "xml": PIXI.BitmapFontLoader, "fnt": PIXI.BitmapFontLoader }; + + }; /** @@ -5485,6 +7038,8 @@ this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ""); this.crossorigin = crossorigin; + this.loaded = false; + }; // constructor @@ -5513,7 +7068,57 @@ if (this.ajaxRequest.readyState == 4) { if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { this.json = JSON.parse(this.ajaxRequest.responseText); - this.onLoaded(); + + if(this.json.frames) + { + // sprite sheet + var scope = this; + var textureUrl = this.baseUrl + this.json.meta.image; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + var frameData = this.json.frames; + + this.texture = image.texture.baseTexture; + image.addEventListener("loaded", function (event) { + scope.onLoaded(); + }); + + for (var i in frameData) { + var rect = frameData[i].frame; + if (rect) { + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { + x: rect.x, + y: rect.y, + width: rect.w, + height: rect.h + }); + if (frameData[i].trimmed) { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) + // calculate the offset! + } + } + } + + image.load(); + + } + else if(this.json.bones) + { + // spine animation + var spineJsonParser = new spine.SkeletonJson(); + var skeletonData = spineJsonParser.readSkeletonData(this.json); + PIXI.AnimCache[this.url] = skeletonData; + this.onLoaded(); + } + else + { + this.onLoaded(); + } + + + + } else { this.onError(); } @@ -5525,6 +7130,7 @@ * @private */ PIXI.JsonLoader.prototype.onLoaded = function () { + this.loaded = true; this.dispatchEvent({ type: "loaded", content: this @@ -5815,6 +7421,83 @@ this.dispatchEvent({type: "loaded", content: this}); }; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi + * + * Awesome JS run time provided by EsotericSoftware + * https://github.com/EsotericSoftware/spine-runtimes + * + */ + +/** + * The Spine loader is used to load in JSON spine data + * To generate the data you need to use http://esotericsoftware.com/ and export the "JSON" format + * Due to a clash of names You will need to change the extension of the spine file from *.json to *.anim for it to load + * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source + * You will need to generate a sprite sheet to accompany the spine data + * When loaded this class will dispatch a "loaded" event + * @class Spine + * @constructor + * @extends + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ +PIXI.SpineLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.url = url; + this.crossorigin = crossorigin; + this.loaded = false; +} + +PIXI.SpineLoader.constructor = PIXI.SpineLoader; + +PIXI.SpineLoader.prototype.load = function() +{ + new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +PIXI.SpineLoader.prototype.load = function () { + + var scope = this; + var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); + jsonLoader.addEventListener("loaded", function (event) { + scope.json = event.content.json; + scope.onJSONLoaded(); + }); + jsonLoader.load(); +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { + + var spineJsonParser = new spine.SkeletonJson(); + + var skeletonData = spineJsonParser.readSkeletonData(this.json); + + PIXI.AnimCache[this.url] = skeletonData; + + this.onLoaded(); +}; + + + +PIXI.SpineLoader.prototype.onLoaded = function() +{ + this.loaded = true; + this.dispatchEvent({type: "loaded", content: this}); +}; + + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ diff --git a/src/pixi/renderers/WebGLRenderGroup.js b/src/pixi/renderers/WebGLRenderGroup.js index 40ca640..ec022dc 100644 --- a/src/pixi/renderers/WebGLRenderGroup.js +++ b/src/pixi/renderers/WebGLRenderGroup.js @@ -275,8 +275,9 @@ child.textureChange = false; if(child.worldVisible) { - //this.addDisplayObject(child); - this.updateTexture(child); + this.removeDisplayObject(child); + this.addDisplayObject(child); + //this.updateTexture(child); } // update texture!! }